Style props

Style props

Style props로 어떤 Mantine 컴포넌트에든 인라인 스타일을 추가할 수 있어요. Style props는 루트 요소에 스타일을 추가해요. 중첩된 요소에 스타일을 적용해야 한다면 Styles API를 대신 사용하세요.

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

function Demo() {
  return <Box mt="md">Your component</Box>;
}

출처: 문서

본문

지원되는 props

루트 요소를 가진 모든 Mantine 컴포넌트는 다음 style props를 지원해요:

Theme 값

일부 style props는 theme의 값을 참조할 수 있어요. 예를 들어 mt에 xs, sm, md, lg, xl을 설정하면 theme.spacing 값을 사용해요:

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

function Demo() {
  return (
    <>
      <Box mt="xs" />
      {/* margin-top: theme.spacing.xs */}
      <Box mt="-md" />
      {/* margin-top: theme.spacing.md * -1 */}
      <Box mt="auto" />
      {/* margin-top: auto */}
      <Box mt={16} />
      {/* margin-top: 1rem */}
      <Box mt={80} />
      {/* margin-top: 5rem */}
    </>
  );
}

c, bd, bg props에서는 theme.colors의 색상을 참조할 수 있어요:

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

function Demo() {
  return (
    <>
      <Box c="blue" />
      {/* color: theme.colors.blue[theme.primaryShade] */}
      <Box bg="orange.1" />
      {/* background: theme.colors.orange[1] */}
      <Box bd="1px solid red.6" />
      {/* border: 1px solid theme.colors.red[6] */}
      <Box c="dimmed" />
      {/* color: colorScheme이 dark면 `var(--mantine-color-dark-2)`,
          color scheme이 light면 `var(--mantine-color-gray-6)` */}
      <Box c="bright" />
      {/* color: colorScheme이 dark면 `var(--mantine-color-white)`,
          color scheme이 light면 `var(--mantine-color-black)` */}
      <Box bg="#EDFEFF" />
      {/* background: #EDFEFF */}
      <Box bg="rgba(0, 34, 45, 0.6)" />
      {/* background: rgba(0, 34, 45, 0.6) */}
    </>
  );
}

반응형 스타일

style props로 반응형 스타일을 추가하려면 객체 문법을 사용할 수 있어요. 반응형 style props는 일반 style props보다 성능이 떨어지므로 요소가 많은 목록에서는 사용하지 않는 것이 좋아요.

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

function Demo() {
  return <Box w={{ base: 200, sm: 300, lg: 400 }}>Box with responsive style props</Box>;
}

반응형 값은 다음 방식으로 계산돼요:

• base 값은 breakpoint 값이 적용되지 않을 때 사용돼요

• xs, sm, md, lg, xl 값은 뷰포트 너비가 theme.breakpoints에 지정된 해당 breakpoint 값보다 클 때 사용돼요

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

function Demo() {
  return <Box w={{ base: 200, sm: 300, lg: 400 }} />;
}

이 경우 요소는 다음 스타일을 가지게 돼요:

/* Base styles added to the element and then get overwritten with responsive values */
.element {
  width: 20rem;
}

/* 48em is theme.breakpoints.sm by default */
@media (min-width: 48em) {
  .element {
    width: 30rem;
  }
}

/* 75em is theme.breakpoints.lg by default */
@media (min-width: 75em) {
  .element {
    width: 40rem;
  }
}

더 알아보기 (Learn more)

• Variants and sizes
• Color functions