style prop

style prop

루트 요소를 가진 모든 Mantine 컴포넌트는 style prop을 지원해요. React의 style prop과 비슷하게 동작하지만 몇 가지 추가 기능이 있어요.

출처: 문서

본문

Style 객체

style prop에 style 객체를 전달할 수 있어요 – 이 경우 React의 style prop과 같은 방식으로 동작해요. .css 파일에서처럼 CSS variables를 style 객체에서 사용할 수 있어요.

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

function Demo() {
  return (
    <Box
      style={{
        width: rem(200),
        color: 'var(--mantine-color-red-5)',
      }}
    />
  );
}

style prop에서 CSS 변수 정의

style prop에서 CSS 변수를 정의할 수 있어요. 이것은 Mantine 컴포넌트에서만 동작한다는 점에 주의하세요:

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

function Demo() {
  return (
    <Box
      style={{
        '--demo-color': 'red',
        color: 'var(--demo-color)',
      }}
    />
  );
}

Style 함수

style prop에 style 함수를 전달할 수 있어요 – 이 경우 theme과 함께 호출돼요. CSS variables로 노출되지 않는 theme 속성, 예를 들어 theme.other의 속성에 접근해야 할 때 유용해요.

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

function Demo() {
  return (
    <Box
      style={(theme) => ({
        color: theme.colors.red[5],
        fontSize: theme.fontSizes.xs,
      })}
    />
  );
}

Styles 배열

style prop에 style 객체 및/또는 함수의 배열을 전달할 수 있어요 – 이 경우 모든 스타일이 하나의 객체로 병합돼요. Mantine 컴포넌트 주변에 래퍼를 만들고, 인라인 스타일을 추가하면서도 style prop을 전달할 수 있는 옵션을 유지하고 싶을 때 유용해요.

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

interface DemoProps {
  style?: MantineStyleProp;
}

function Demo({ style }: DemoProps) {
  return <Box style={[style, { color: 'red' }]} />;
}

더 알아보기 (Learn more)