스타일 개요

스타일 개요 (Styles overview)

이 가이드는 Mantine과 커스텀 컴포넌트에 스타일을 적용하는 방법을 이해하는 데 도움을 줘요.

출처: 문서

본문

컴포넌트 전용 props

대부분의 컴포넌트는 스타일을 커스터마이즈할 수 있는 props를 제공해요. 예를 들어 Button 컴포넌트는 외관을 제어하는 color, variant, size, radius props를 가지고 있어요:

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

function Demo() {
  return <Button variant="filled" color="blue" size="md" radius="md">Button</Button>;
}

이 props들은 보통 여러 CSS 속성을 제어해요. 예를 들어 color와 variant props는 color, background-color, border 속성을 제어해요. 대부분의 경우 컴포넌트 props를 바꾸는 것이 Mantine 컴포넌트를 커스터마이즈하는 가장 최적의 방법이에요.

Style props

Style props는 컴포넌트 전용 props와 비슷하지만 몇 가지 차이가 있어요:

Style props는 컴포넌트 전용이 아니에요; 어떤 컴포넌트에서도 사용할 수 있어요.
Style props는 항상 하나의 CSS 속성만 제어해요. 예를 들어 c prop은 CSS color 속성을 제어하는 반면, color prop은 color, background-color, border-color 같은 속성 집합을 제어해요.
Style props는 style 속성에 설정돼요. !important를 사용하지 않고는 CSS로 재정의할 수 없어요.

Style props는 스타일을 위한 별도 파일을 만들지 않고 하나의 CSS 속성을 바꿔야 할 때 유용해요. 가장 흔한 사용 사례는:

텍스트 색상과 font-size 변경

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

function Demo() {
  return (
    <>
      <Text c="blue" fz="xl">Card title</Text>
      <Text c="dimmed" fz="sm">Card description</Text>
    </>
  );
}

form 안의 input에 margin 적용:

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

function Demo() {
  return (
    <>
      <TextInput mb="md" />
      <TextInput />
    </>
  );
}

다양한 요소에 padding 추가:

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

function Demo() {
  return <Paper p="md">My custom card</Paper>;
}

style props는 컴포넌트 스타일링의 주된 수단으로 사용하려고 만들어진 것이 아니라는 점에 주의하세요. 대부분의 경우 컴포넌트당 사용하는 style props 수를 3-4개로 제한하는 것이 좋아요. 4개 이상의 style props를 사용하고 있다면 별도의 스타일 파일을 만드는 것을 고려하세요 – 유지보수가 더 쉬워지고 성능도 더 좋아요.

Style prop

Style prop은 모든 Mantine 컴포넌트에서 지원되며 CSS 속성뿐 아니라 CSS variables도 설정할 수 있게 해줘요. 다음 경우에 유용해요:

컴포넌트에 단일 CSS 속성을 적용하고 싶을 때:

import { Button, Flex } from '@mantine/core';

function Demo() {
  return (
    <Flex direction="column" gap="sm" align="flex-start">
      <Button size="lg">Large button</Button>
      <Button size="sm">Small button</Button>
    </Flex>
  );
}

컴포넌트 prop에 기반해 CSS 변수를 설정하고 싶을 때:

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

function Demo({ color }: { color: string }) {
  // Later you will be able to use var(--my-color) in any nested element
  return <Box style={{ '--my-color': color }}>My box</Box>;
}

Style prop은 React의 style prop과 같은 방식으로 동작해요. 컴포넌트 스타일링의 주된 수단으로 쓰는 것은 권장되지 않아요. 대부분의 경우 별도의 스타일 파일을 만드는 것이 더 좋아요 – 유지보수가 더 쉽고 성능도 더 좋아요.

CSS modules

CSS modules은 Mantine 컴포넌트에 대부분의 스타일을 적용하는 권장 방식이에요. CSS modules는 컴포넌트를 스타일링하는 가장 성능이 좋고 유연한 방법이에요.

// Demo.module.css

.root {
  padding-right: 100px;

  &[data-collapsed] {
    padding-right: 40px;

    & .control {
      max-width: 200px;
    }
  }
}

.control {
  background-color: var(--mantine-color-blue-1);
  color: var(--mantine-color-blue-filled);
  padding: var(--mantine-spacing-xl);
  margin-left: 40px;

  @media (max-width: $mantine-breakpoint-sm) {
    margin-left: 0;
    margin-top: var(--mantine-spacing-md);
  }

  @mixin hover {
    background-color: light-dark(
      var(--mantine-color-blue-1),
      var(--mantine-color-blue-9)
    );
  }
}

// Demo.tsx
import classes from './Demo.module.css';

function Demo({ collapsed }: { collapsed: boolean }) {
  return (
    <div className={classes.root} data-collapsed={collapsed || undefined}>
      <button className={classes.control}>Control</button>
    </div>
  );
}

Theme 토큰

어떤 스타일에서든 CSS variables로 Mantine theme 값을 참조할 수 있어요:

CSS modules에서:

.root {
  // references theme.colors.red[5]
  background: var(--mantine-color-red-5);

  // references theme.spacing.md
  margin-top: var(--mantine-spacing-md);

  // references theme.headings.fontFamily
  font-family: var(--mantine-font-family-headings);
}

style props에서:

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

function Demo() {
  // bg="red.5" references theme.colors.red[5]
  // "red.5" is a shorthand for var(--mantine-color-red-5)

  // mt="xl" references theme.spacing.xl
  // "xl" is a shorthand for var(--mantine-spacing-xl)
  return (
    <Box bg="red.5" mt="xl">
      My box
    </Box>
  );
}

style prop에서:

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

function Demo() {
  return (
    <>
      <Box style={{ margin: 'var(--mantine-spacing-xl)' }}>
        With CSS variables
      </Box>
      <Box
        style={(theme) => ({
          margin: theme.spacing.xl,
          color: theme.colors.orange[5],
        })}
      >
        With theme object
      </Box>
    </>
  );
}

스타일 개요