Mantine 스타일

이 가이드는 애플리케이션에서 @mantine/* 패키지의 스타일을 import 하는 방법과, 애플리케이션에서 스타일시트의 순서를 제어할 수 없는 경우 CSS layers로 스타일을 재정의하는 방법을 설명해요.

출처: 문서

본문

Mantine 컴포넌트 스타일

모든 Mantine 컴포넌트는 CSS modules로 만들어지지만, 모든 스타일은 npm에 배포하기 전에 번들로 묶여요. 이 스타일을 포함하려면 애플리케이션에서 @mantine/{package}/styles.css 파일을 import 해야 해요. @mantine/core 패키지 예시:

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

이 import를 추가하면 애플리케이션에 @mantine/core 컴포넌트의 모든 스타일이 포함돼요.

컴포넌트별 스타일 import

CSS 번들 크기를 줄이고 싶다면 컴포넌트별로 스타일을 import 할 수 있어요. 일부 컴포넌트에는 의존성이 있다는 점에 주의하세요. 예를 들어 Button 컴포넌트는 내부적으로 UnstyledButton 컴포넌트를 사용하므로 두 컴포넌트 모두의 스타일을 import 해야 해요. @mantine/core 패키지에서 내보내는 스타일 전체 목록과 추가 설명은 이 페이지에서 확인할 수 있어요.

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

개별 컴포넌트 스타일은 @mantine/core 패키지에서만 사용할 수 있다는 점에 주의하세요. 다른 패키지는 @mantine/{package}/styles.css import로 가져올 수 있는 최소한의 스타일을 가지고 있어요.

스타일 import 순서

올바른 스타일 import 순서를 유지하는 것이 중요해요. @mantine/core 패키지 스타일은 항상 다른 Mantine 패키지 스타일보다 먼저 import 해야 해요:

// ✅ 올바른 순서
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
// ❌ 틀린 순서
import '@mantine/dates/styles.css';
import '@mantine/core/styles.css';

애플리케이션 스타일은 항상 모든 @mantine/* 패키지 스타일 다음에 import 해야 해요:

// ✅ 올바른 순서 - 사용자 스타일이 Mantine 스타일을 덮어써요
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
import classes from './Demo.module.css';

// ❌ 틀린 순서 – Mantine 스타일이 사용자 스타일을 덮어써요
import classes from './Demo.module.css';
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';

CSS layers

일부 번들러와 프레임워크는 애플리케이션에서 스타일시트의 순서를 제어할 수 없게 해요. 예를 들어 Next.js는 styles import 순서를 보장하지 않아요. 이 경우 CSS layers를 사용해 사용자 스타일이 항상 Mantine 스타일을 덮어쓰도록 할 수 있어요.

스타일을 내보내는 모든 @mantine/* 패키지에는 모든 스타일이 @layer mantine 지시문으로 감싸진 추가 파일이 있어요.

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

// ... other styles

이 파일들은 styles.css 파일과 동일한 스타일을 포함하지만 @layer mantine 지시문으로 감싸져 있어요. 애플리케이션에서 styles.css와 styles.layer.css 파일을 둘 다 import 하지 않도록 하세요.

// ❌ styles.css와 styles.layer.css를 둘 다 import 하지 마세요
import '@mantine/core/styles.css';
import '@mantine/core/styles.layer.css';

패키지 스타일과 유사하게 @layer mantine 지시문으로 개별 컴포넌트 스타일도 import 할 수 있어요:

import '@mantine/core/styles/UnstyledButton.layer.css';
import '@mantine/core/styles/Button.layer.css';

// ... other styles

CSS layers가 동작하는 방식

레이어 안의 CSS 규칙은 함께 그룹화되어 레이어가 없는 규칙보다 먼저 적용돼요. 즉, 스타일 import 순서를 제어할 수 없더라도 일반 스타일로 Mantine 스타일을 덮어쓸 수 있어요.

// ✅ 사용자 스타일이 @layer 지시문으로 감싸져 있지 않으면
// Mantine 스타일 다음에 적용돼요
import classes from './Demo.module.css';

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

CSS layers는 Mantine 컴포넌트를 스타일을 제공하는 다른 라이브러리와 결합하고 싶을 때도 유용해요. @layer 지시문으로 스타일의 순서를 제어할 수 있어요:

@layer base, mantine, components;

이 예시에서 Mantine 스타일은 다른 라이브러리의 base 스타일보다 우선하지만, 다른 라이브러리의 components 스타일은 Mantine 컴포넌트 스타일보다 우선해요.

2026년 1월 기준으로 CSS layers는 모든 현대 브라우저에서 지원되며 95% 브라우저 지원률을 가지고 있어요.

CDN에서 스타일 로드

unpkg CDN에서도 Mantine 스타일을 로드할 수 있어요. 이 경우 package.json과 CDN 링크 양쪽에 @mantine/* 패키지의 정확한 버전을 지정하는 것이 권장돼요.

<link rel="stylesheet" href="https://unpkg.com/@mantine/[email protected]/styles.css" />

unpkg CDN의 스타일은 스타일을 내보내는 모든 Mantine 패키지에서 사용할 수 있어요.

Mantine 스타일