Mantine CSS 변수

Mantine CSS 변수

MantineProvider는 주어진 theme을 기반으로 모든 Mantine CSS 변수를 노출해요. 이 변수들은 CSS 파일, style prop 또는 다른 어떤 스타일에서도 사용할 수 있어요. 이 페이지에서 모든 값이 문서화되는 것은 아니라는 점에 주의하세요. 전체 변수 목록은 이 페이지에서 확인할 수 있어요.

출처: 문서

본문

타이포그래피 변수

타이포그래피 변수는 모든 Mantine 컴포넌트의 font family, font size, line height, font weight 및 기타 텍스트 관련 속성을 제어해요.

Font family

다음 CSS 변수는 모든 Mantine 컴포넌트에 font family를 할당하는 데 사용돼요:

변수	기본값
--mantine-font-family	대부분의 Mantine 컴포넌트의 font-family 속성을 제어
--mantine-font-family-monospace	코드 블록의 font-family 속성을 제어
--mantine-font-family-headings	제목의 font-family 속성을 제어

이 변수들은 theme에서 제어할 수 있어요. theme.headings.fontFamily가 설정되지 않으면 --mantine-font-family-headings 값은 --mantine-font-family와 같게 돼요.

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

const theme = createTheme({
  // Controls --mantine-font-family
  fontFamily: 'Arial, sans-serif',

  // Controls --mantine-font-family-monospace
  fontFamilyMonospace: 'Courier New, monospace',

  headings: {
    // Controls --mantine-font-family-headings
    fontFamily: 'Georgia, serif',
  },
});

커스텀 폰트의 폴백으로 시스템 폰트를 사용하고 싶다면, 수동으로 정의하는 대신 DEFAULT_THEME 값을 참조할 수 있어요:

import { createTheme, DEFAULT_THEME } from '@mantine/core';

const theme = createTheme({
  fontFamily: `Roboto, ${DEFAULT_THEME.fontFamily}`,
});

CSS에서 font family 변수를 참조할 수 있어요:

.text {
  font-family: var(--mantine-font-family);
}

.code {
  font-family: var(--mantine-font-family-monospace);
}

.heading {
  font-family: var(--mantine-font-family-headings);
}

그리고 ff style prop에서도 사용할 수 있어요:

• ff="text" – --mantine-font-family 변수를 사용해요

• ff="monospace" – --mantine-font-family-monospace 변수를 사용해요

• ff="heading" – --mantine-font-family-headings 변수를 사용해요

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

function Demo() {
  return <Text ff="monospace">This text uses the --mantine-font-family-monospace variable</Text>;
}

Font size

Font size 변수는 대부분의 Mantine 컴포넌트에서 텍스트 크기를 제어하는 데 사용돼요. 선택되는 변수는 컴포넌트와 그 size prop에 따라 달라져요.

변수	기본값
--mantine-font-size-xs	0.75rem (12px)
--mantine-font-size-sm	0.875rem (14px)
--mantine-font-size-md	1rem (16px)
--mantine-font-size-lg	1.125rem (18px)
--mantine-font-size-xl	1.25rem (20px)

CSS에서 font size 변수를 참조할 수 있어요:

.demo {
  font-size: var(--mantine-font-size-md);
}

그리고 fz style prop에서도 사용할 수 있어요:

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

function Demo() {
  return <Text fz="xl">This text uses --mantine-font-size-xl variable</Text>;
}

커스텀 font size를 정의하려면 theme.fontSizes 속성을 사용할 수 있어요:

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

const theme = createTheme({
  fontSizes: {
    xs: '0.5rem',
    sm: '0.75rem',
    md: '1rem',
    lg: '1.25rem',
    xl: '1.5rem',
  },
});

theme.fontSizes 객체는 DEFAULT_THEME.fontSizes와 병합된다는 점에 주의하세요 – 모든 값을 정의할 필요는 없고, 변경하고 싶은 값만 정의하면 돼요.

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

// Changes only xs font size,
// other values will be taken from the DEFAULT_THEME
const theme = createTheme({
  fontSizes: {
    xs: '0.5rem',
  },
});

theme.fontSizes 객체에 원하는 만큼 추가 font size를 넣을 수 있어요. 이 값들은 --mantine-font-size-{size} 형식의 CSS 변수로 정의돼요:

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

const theme = createTheme({
  fontSizes: {
    xxs: '0.125rem',
    xxl: '2rem',
  },
});

theme.fontSizes를 정의한 후, CSS에서 이 변수들을 참조할 수 있어요:

.demo {
  font-size: var(--mantine-font-size-xxs);
}

케이스 변환

케이스 변환(camelCase → kebab-case)은 커스텀 font size에는 자동으로 적용되지 않아요. theme.fontSizes를 camelCase 키로 정의하면 camelCase 형식으로 참조해야 해요. 예를 들어 { customSize: '1rem' }으로 정의했다면 --mantine-font-size-customSize로 참조해야 해요.

Line height

Line height 변수는 Text 컴포넌트에서 사용돼요. 다른 컴포넌트에서는 line-height를 font size를 기반으로 계산하거나 --mantine-line-height-md의 별칭인 --mantine-line-height로 설정해요.

변수	기본값
--mantine-line-height	1.55
--mantine-line-height-xs	1.4
--mantine-line-height-sm	1.45
--mantine-line-height-md	1.55
--mantine-line-height-lg	1.6
--mantine-line-height-xl	1.65

CSS에서 line height 변수를 참조할 수 있어요:

.demo {
  line-height: var(--mantine-line-height-md);
}

그리고 lh style prop에서도 사용할 수 있어요:

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

function Demo() {
  return <Text lh="xl">This text uses --mantine-line-height-xl variable</Text>;
}

커스텀 line height를 정의하려면 theme.lineHeights 속성을 사용할 수 있어요:

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

const theme = createTheme({
  lineHeights: {
    xs: '1.2',
    sm: '1.3',
    md: '1.4',
    lg: '1.5',
    xl: '1.6',
  },
});

제목 (Headings)

theme.headings는 Title과 Typography 컴포넌트에서 제목의 font-size, line-height, font-weight 및 text-wrap CSS 속성을 제어해요.

일반 변수:

변수	기본값
--mantine-heading-font-weight	재정의되지 않은 모든 제목의 font-weight 속성을 제어
--mantine-heading-text-wrap	모든 제목의 text-wrap 속성을 제어

h1 제목:

변수	기본값
--mantine-h1-font-size	2.125rem (34px)
--mantine-h1-line-height	1.3
--mantine-h1-font-weight	700

h2 제목:

변수	기본값
--mantine-h2-font-size	1.625rem (26px)
--mantine-h2-line-height	1.35
--mantine-h2-font-weight	700

h3 제목:

변수	기본값
--mantine-h3-font-size	1.375rem (22px)
--mantine-h3-line-height	1.4
--mantine-h3-font-weight	700

h4 제목:

변수	기본값
--mantine-h4-font-size	1.125rem (18px)
--mantine-h4-line-height	1.45
--mantine-h4-font-weight	700

h5 제목:

변수	기본값
--mantine-h5-font-size	1rem (16px)
--mantine-h5-line-height	1.5
--mantine-h5-font-weight	700

h6 제목:

변수	기본값
--mantine-h6-font-size	0.875rem (14px)
--mantine-h6-line-height	1.5
--mantine-h6-font-weight	700

이 변수들은 Title 컴포넌트에서 사용되며, order prop이 어느 제목 레벨을 사용할지 제어해요. 예를 들어 order={3} Title은 다음을 사용해요:

• --mantine-h3-font-size
• --mantine-h3-line-height
• --mantine-h3-font-weight

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

function Demo() {
  return (
    <>
      <Title order={1}>This is h1 title</Title>
      <Title order={2}>This is h2 title</Title>
      <Title order={3}>This is h3 title</Title>
      <Title order={4}>This is h4 title</Title>
      <Title order={5}>This is h5 title</Title>
      <Title order={6}>This is h6 title</Title>
    </>
  );
}

CSS에서 제목 변수를 참조할 수 있어요:

.h1 {
  font-size: var(--mantine-h1-font-size);
  line-height: var(--mantine-h1-line-height);
  font-weight: var(--mantine-h1-font-weight);
}

그리고 fz와 lh style props에서도:

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

function Demo() {
  return <Box fz="h1" lh="h1">This text uses --mantine-h1-* variables</Box>;
}

제목 스타일을 바꾸려면 theme.headings 속성을 사용할 수 있어요:

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

const theme = createTheme({
  headings: {
    sizes: {
      h1: {
        fontSize: '2rem',
        lineHeight: '1.5',
        fontWeight: '500',
      },
      h2: {
        fontSize: '1.5rem',
        lineHeight: '1.6',
        fontWeight: '500',
      },
    },
    // ...
  },
});

theme.headings 객체는 DEFAULT_THEME.headings 객체와 깊게 병합돼요 – 모든 값을 정의할 필요는 없고 변경하고 싶은 값만 정의하면 돼요.

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

// Changes only font-size of h1,
// other values will be taken from the DEFAULT_THEME
const theme = createTheme({
  headings: {
    sizes: {
      h1: {
        fontSize: '2rem',
      },
    },
  },
});

Font smoothing

Font smoothing 변수는 -webkit-font-smoothing과 moz-osx-font-smoothing CSS 속성을 제어해요. 이 변수들은 높은 픽셀 밀도의 화면에서 텍스트를 더 좋게 보이게 하는 데 사용돼요.

Font smoothing 변수는 theme.fontSmoothing theme 속성으로 제어되며 기본값은 true예요. theme.fontSmoothing이 false면 두 변수 모두 unset으로 설정돼요.

변수	기본값
--mantine-webkit-font-smoothing	-webkit-font-smoothing CSS 속성을 제어
--mantine-moz-font-smoothing	-moz-osx-font-smoothing CSS 속성을 제어

font smoothing 값을 재정의해야 한다면 가장 좋은 방법은 theme.fontSmoothing을 비활성화하고 body 요소에 전역 스타일을 설정하는 거예요:

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

// Disable font smoothing in your theme
const theme = createTheme({
  fontSmoothing: false,
});

/* Add global styles to your project with desired font smoothing values */
body {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

색상 변수

색상 변수는 theme.colors와 theme.primaryColor로 제어돼요. theme.colors 객체에 정의된 각 색상은 10개의 shade를 가져야 해요. 테마 색상은 이름과 shade 인덱스로 참조할 수 있어요. 예를 들어 --mantine-color-red-6.

theme 객체에 새 색상을 정의하거나 기존 색상을 재정의할 수 있어요:

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

const theme = createTheme({
  colors: {
    demo: [
      '#FF0000',
      '#FF3333',
      '#FF6666',
      '#FF9999',
      '#FFCCCC',
      '#FFEEEE',
      '#FFFAFA',
      '#FFF5F5',
      '#FFF0F0',
      '#FFEBEB',
    ],
  },
});

위 코드는 다음 CSS 변수를 정의해요:

변수	기본값
--mantine-color-demo-0	#FF0000
--mantine-color-demo-1	#FF3333
--mantine-color-demo-2	#FF6666
--mantine-color-demo-3	#FF9999
--mantine-color-demo-4	#FFCCCC
--mantine-color-demo-5	#FFEEEE
--mantine-color-demo-6	#FFFAFA
--mantine-color-demo-7	#FFF5F5
--mantine-color-demo-8	#FFF0F0
--mantine-color-demo-9	#FFEBEB

Variant 색상

Button이나 Badge 같은 일부 Mantine 컴포넌트는 color prop과 조합되어 컴포넌트의 텍스트, 배경, 테두리 색상을 제어하는 variant prop이 있어요. Mantine은 각 variant와 색상에 대해 이 색상들을 제어하는 CSS 변수 집합을 정의해요. 예를 들어 기본 blue 색상에는 다음 CSS 변수가 정의돼요:

Filled variant:

변수	기본값
--mantine-color-blue-filled	filled variant의 배경색
--mantine-color-blue-filled-hover	hover 시 filled variant의 배경색

Light variant:

변수	기본값
--mantine-color-blue-light	light variant의 배경색
--mantine-color-blue-light-hover	hover 시 light variant의 배경색
--mantine-color-blue-light-color	light variant의 텍스트 색상

Outline variant:

변수	기본값
--mantine-color-blue-outline	outline variant의 테두리 색상
--mantine-color-blue-outline-hover	hover 시 outline variant의 테두리 색상

예를 들어 Button 컴포넌트를 다음과 같이 사용하면:

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

function Demo() {
  return <Button variant="filled" color="pink">Filled pink button</Button>;
}

컴포넌트는 다음 스타일을 가지게 돼요:

• 배경색은 var(--mantine-color-pink-filled)
• hover 시 배경색은 var(--mantine-color-pink-filled-hover)
• 텍스트 색상은 var(--mantine-color-white)
• 테두리 색상은 transparent

위 변수들은 정적이 아니라 theme.colors와 theme.primaryShade 값을 기반으로 생성된다는 점에 주의하세요. 또한 dark/light 색상 체계에 따라 값이 달라져요.

Variant 색상 변수는 color prop을 지원하는 모든 컴포넌트에서 사용돼요. 예를 들어 Button, Badge, Avatar, Pagination. 이 컴포넌트들이 사용하는 색상 값은 아래에 설명된 cssVariablesResolver와 variantColorResolver로 결정돼요.

Primary 색상 변수

Primary 색상 변수는 theme.primaryColor(theme.colors의 키여야 함)로 정의돼요. primary 색상에는 다음 CSS 변수가 정의돼요:

변수	기본값
--mantine-primary-color-{shade}	특정 primary 색상 shade를 참조하기 위한 0-9 shade
--mantine-primary-color-filled	filled variant의 배경색
--mantine-primary-color-filled-hover	hover 시 filled variant의 배경색
--mantine-primary-color-light	light variant의 배경색
--mantine-primary-color-light-hover	hover 시 light variant의 배경색
--mantine-primary-color-light-color	light variant의 텍스트 색상

CSS에서 primary 색상 변수를 참조할 수 있어요:

.demo {
  color: var(--mantine-primary-color-0);
  background-color: var(--mantine-primary-color-filled);
}

기타 색상 변수

다음 색상은 다양한 Mantine 컴포넌트에서 사용돼요. 기본값은 light 색상 체계 기준이며, dark 색상 체계 값은 다르다는 점에 주의하세요.

변수	설명	기본값
--mantine-color-white	theme.white 값	#fff
--mantine-color-black	theme.black 값	#000
--mantine-color-text	body 요소의 텍스트 색상	var(--mantine-color-black)
--mantine-color-body	body 배경색	var(--mantine-color-white)
--mantine-color-error	오류 메시지와 상태에 사용되는 색상	var(--mantine-color-red-6)
--mantine-color-success	성공 메시지와 상태에 사용되는 색상	var(--mantine-color-teal-8)
--mantine-color-placeholder	input placeholder 색상	var(--mantine-color-gray-5)
--mantine-color-dimmed	흐려진(dimmed) 텍스트 색상	var(--mantine-color-gray-6)
--mantine-color-bright	밝은 텍스트 색상	var(--mantine-color-black)
--mantine-color-anchor	링크 색상	var(--mantine-primary-color-6)
--mantine-color-default	default variant의 배경색	var(--mantine-color-white)
--mantine-color-default-hover	hover 시 default variant의 배경색	var(--mantine-color-gray-0)
--mantine-color-default-color	default variant의 텍스트 색상	var(--mantine-color-black)
--mantine-color-default-border	default variant의 테두리 색상	var(--mantine-color-gray-4)
--mantine-color-disabled	비활성 요소의 배경색	var(--mantine-color-gray-2)
--mantine-color-disabled-color	비활성 요소의 텍스트 색상	var(--mantine-color-gray-5)
--mantine-color-disabled-border	비활성 요소의 테두리 색상	var(--mantine-color-gray-3)

Spacing 변수

theme.spacing 값은 대부분의 Mantine 컴포넌트에서 padding, margin 및 기타 spacing 관련 속성을 제어하는 데 사용돼요. theme.spacing을 기반으로 다음 CSS 변수가 정의돼요:

변수	기본값
--mantine-spacing-xs	0.625rem (10px)
--mantine-spacing-sm	0.75rem (12px)
--mantine-spacing-md	1rem (16px)
--mantine-spacing-lg	1.25rem (20px)
--mantine-spacing-xl	2rem (32px)

커스텀 spacing 값을 정의하려면 theme.spacing 속성을 사용해요:

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

const theme = createTheme({
  spacing: {
    xs: '0.5rem',
    sm: '0.75rem',
    md: '1rem',
    lg: '1.5rem',
    xl: '2rem',
  },
});

Border radius 변수

radius prop을 지원하는 Mantine 컴포넌트는 border radius 변수를 사용해 테두리 반경을 제어해요. theme.radius를 기반으로 다음 CSS 변수가 정의돼요:

변수	기본값
--mantine-radius-xs	0.125rem (2px)
--mantine-radius-sm	0.25rem (4px)
--mantine-radius-md	0.5rem (8px)
--mantine-radius-lg	1rem (16px)
--mantine-radius-xl	2rem (32px)

추가로 theme.defaultRadius 값을 기반으로 --mantine-radius-default 변수가 정의돼요. 컴포넌트의 radius prop이 명시적으로 설정되지 않으면 --mantine-radius-default가 대신 사용돼요.

커스텀 border radius 값을 정의하려면 theme.radius와 theme.defaultRadius 속성을 사용해요:

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

const theme = createTheme({
  defaultRadius: 'sm',
  radius: {
    xs: '0.25rem',
    sm: '0.5rem',
    md: '1rem',
    lg: '2rem',
    xl: '3rem',
  },
});

Shadow 변수

Shadow 변수는 shadow prop을 지원하는 모든 Mantine 컴포넌트에서 사용돼요. theme.shadows를 기반으로 다음 CSS 변수가 정의돼요:

변수	기본값
--mantine-shadow-xs	0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)
--mantine-shadow-sm	0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 10px 15px -5px, rgba(0, 0, 0, 0.04) 0 7px 7px -5px
--mantine-shadow-md	0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 20px 25px -5px, rgba(0, 0, 0, 0.04) 0 10px 10px -5px
--mantine-shadow-lg	0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 28px 23px -7px, rgba(0, 0, 0, 0.04) 0 12px 12px -7px
--mantine-shadow-xl	0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 36px 28px -7px, rgba(0, 0, 0, 0.04) 0 17px 17px -7px

커스텀 shadow 값을 정의하려면 theme.shadows 속성을 사용해요:

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

const theme = createTheme({
  shadows: {
    xs: '0 1px 2px rgba(0, 0, 0, 0.1)',
    sm: '0 1px 3px rgba(0, 0, 0, 0.1)',
    md: '0 2px 4px rgba(0, 0, 0, 0.1)',
    lg: '0 4px 8px rgba(0, 0, 0, 0.1)',
    xl: '0 8px 16px rgba(0, 0, 0, 0.1)',
  },
});

z-index 변수

z-index 변수는 @mantine/core/styles.css에 정의돼요. 다른 변수와 달리 z-index 변수는 theme으로 제어되지 않고 theme 객체에 노출되지도 않아요.

변수	기본값
--mantine-z-index-app	100
--mantine-z-index-modal	200
--mantine-z-index-popover	300
--mantine-z-index-overlay	400
--mantine-z-index-max	9999

CSS에서 z-index 변수를 참조할 수 있어요:

/* Display content above the modal */
.my-content {
  z-index: calc(var(--mantine-z-index-modal) + 1);
}

그리고 컴포넌트에서 CSS 변수를 참조해 사용할 수 있어요:

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

function Demo() {
  return (
    <Modal
      styles={{
        content: { zIndex: 201 },
      }}
    >
      Modal content
    </Modal>
  );
}

CSS variables resolver

MantineProvider의 cssVariablesResolver prop은 Mantine CSS 변수의 값을 수정하거나 고유한 변수를 추가할 수 있게 해줘요. cssVariablesResolver는 theme을 단일 인자로 받아 세 그룹으로 나뉜 CSS 변수 객체를 반환하는 함수예요:

• variables – 색상 체계에 의존하지 않는 변수

• light – light 색상 체계 전용 변수

• dark – dark 색상 체계 전용 변수

theme.other를 기반으로 새 CSS 변수를 추가하는 예시:

import {
  createTheme,
  CSSVariablesResolver,
  MantineProvider,
} from '@mantine/core';

const themeOverride = createTheme({
  other: {
    deepOrangeLight: '#E17900',
    deepOrangeDark: '#FC8C0C',
    heroHeight: 400,
  },
});

const resolver: CSSVariablesResolver = (theme) => ({
  variables: {
    '--mantine-hero-height': theme.other.heroHeight,
  },
  light: {
    '--mantine-color-deep-orange': theme.other.deepOrangeLight,
  },
  dark: {
    '--mantine-color-deep-orange': theme.other.deepOrangeDark,
  },
});

function Demo() {
  return (
    <MantineProvider theme={themeOverride} cssVariablesResolver={resolver}>
      {/* Your app here */}
    </MantineProvider>
  );
}

그러면 애플리케이션의 어느 곳에서든 --mantine-hero-height와 --mantine-color-deep-orange 변수를 사용할 수 있어요:

.hero {
  height: var(--mantine-hero-height);

  /* background color will automatically change based on color scheme */
  background-color: var(--mantine-color-deep-orange);
}

더 알아보기 (Learn more)

• Global styles
• CSS variables list