전역 스타일

전역 스타일 (Global styles)

@mantine/core 패키지에는 컴포넌트가 올바르게 동작하기 위해 필요한 전역 스타일이 포함돼 있어요. 이 스타일들을 재정의하면 일부 컴포넌트가 예상대로 동작하지 않을 수 있어요.

전역 스타일은 다음으로 자동 import 돼요:

import '@mantine/core/styles.css';

스타일을 컴포넌트별로 import 하려면 모든 전역 스타일을 수동으로 import 해야 해요:

import '@mantine/core/styles/baseline.css';
import '@mantine/core/styles/default-css-variables.css';
import '@mantine/core/styles/global.css';

출처: 문서

본문

CSS reset

@mantine/core 패키지에는 최소한의 CSS reset이 포함돼 있어요 – 컴포넌트가 현대 브라우저에서 동작하기 위해 필요한 기본 스타일만 포함돼요. 구형 브라우저를 지원해야 한다면 normalize.css나 원하는 다른 CSS reset을 추가로 포함시킬 수 있어요.

body {
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

input,
button,
textarea,
select {
  font: inherit;
}

button,
select {
  text-transform: none;
}

body와 :root 요소 스타일

@mantine/core 패키지에는 다음 body와 :root 요소 스타일이 포함돼 있어요:

:root {
  color-scheme: var(--mantine-color-scheme);
}

body {
  font-family: var(--mantine-font-family);
  font-size: var(--mantine-font-size-md);
  line-height: var(--mantine-line-height);
  background-color: var(--mantine-color-body);
  color: var(--mantine-color-text);

  -webkit-font-smoothing: var(--mantine-webkit-font-smoothing);
  -moz-osx-font-smoothing: var(--mantine-moz-font-smoothing);
}

정적 클래스

@mantine/core 패키지에는 다음 정적 클래스가 포함돼 있어요:

mantine-active – :active 스타일을 포함해요
mantine-focus-auto – :focus-visible 스타일을 포함해요
mantine-focus-always – :focus 스타일을 포함해요
mantine-focus-never – 브라우저 기본 focus ring을 제거해요
mantine-visible-from-{breakpoint} – 화면 너비가 breakpoint보다 클 때 요소를 보여줘요. 예: mantine-visible-from-sm
mantine-hidden-from-{breakpoint} – 화면 너비가 breakpoint보다 클 때 요소를 숨겨요. 예: mantine-hidden-from-sm

이 클래스들은 어떤 컴포넌트나 요소에서도 사용할 수 있어요:

import { Group } from '@mantine/core';

function Demo() {
  return (
    <Group>
      <Button className="mantine-focus-auto">Focus auto</Button>
      <Button className="mantine-focus-always">Focus always</Button>
      <Button className="mantine-focus-never">Focus never</Button>
      <Button className="mantine-active">Active</Button>
    </Group>
  );
}

애플리케이션에 전역 스타일 추가

className prop이나 Styles API로 Mantine 컴포넌트에 스타일을 적용할 때는 CSS modules를 사용하는 것이 권장돼요. CSS modules 파일 이름은 보통 .module.css로 끝나요. 애플리케이션에 전역 스타일을 추가하려면 .module 부분 없이 .css 확장자를 가진 파일, 예를 들어 global.css를 만들어요.

전역 .css 파일에서는 모든 Mantine CSS variables를 참조하고 ``, :root 및 다른 요소의 스타일을 바꿀 수 있어요. 예를 들어 body background-color를 바꾸려면:

body {
  background-color: var(--mantine-color-red-filled);
}

전역 스타일