CSS 파일 목록

CSS 파일 목록

이 페이지는 @mantine/core/styles.css를 대신해 @mantine/core 패키지에서 import 할 수 있는 CSS 파일 목록을 담고 있어요.

출처: 문서

본문

컴포넌트 의존성

일부 컴포넌트는 제대로 동작하기 위해 추가 스타일이 필요해요. 예를 들어 Button 컴포넌트는 UnstyledButton을 기반으로 해요. Button을 사용하려면 UnstyledButton 스타일도 함께 import 해야 해요.

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

Select 같은 일부 컴포넌트는 자체 스타일이 없어요 – 다른 컴포넌트 위에 만들어져 있기 때문이에요. 특정 컴포넌트에서 어떤 컴포넌트가 사용되는지 알아보려면 컴포넌트의 소스 코드를 확인하면 돼요.

특정 컴포넌트에서 어떤 컴포넌트가 사용되는지 확실하지 않다면, 다른 컴포넌트에서 재사용되는 컴포넌트들의 모든 스타일을 import 할 수 있어요:

import '@mantine/core/styles/ScrollArea.css';
import '@mantine/core/styles/UnstyledButton.css';
import '@mantine/core/styles/VisuallyHidden.css';
import '@mantine/core/styles/Paper.css';
import '@mantine/core/styles/Popover.css';
import '@mantine/core/styles/CloseButton.css';
import '@mantine/core/styles/Group.css';
import '@mantine/core/styles/Loader.css';
import '@mantine/core/styles/Overlay.css';
import '@mantine/core/styles/ModalBase.css';
import '@mantine/core/styles/Input.css';
import '@mantine/core/styles/InlineInput.css';
import '@mantine/core/styles/Flex.css';
import '@mantine/core/styles/FloatingIndicator.css';
import '@mantine/core/styles/ActionIcon.css';

전역 스타일

모든 Mantine 컴포넌트는 전역 스타일에 의존해요. 다른 모든 스타일보다 먼저 import 해야 해요:

• baseline.css – 최소한의 CSS reset으로, box-sizing: border-box를 설정하고 폰트 속성을 변경해요

• default-css-variables.css – 기본 테마에서 생성된 모든 CSS 변수를 포함해요

• global.css – Mantine 컴포넌트에서 사용되는 전역 클래스

import '@mantine/core/styles/baseline.css';
import '@mantine/core/styles/default-css-variables.css';
import '@mantine/core/styles/global.css';

import 순서

올바른 스타일 import 순서를 유지하는 것이 중요해요. 예를 들어 Button 컴포넌트를 사용하려면 먼저 UnstyledButton 스타일을 import 하고 그 다음 Button 스타일을 import 해야 해요.

// ✅ 올바른 순서 – Button 스타일이 UnstyledButton 스타일을 덮어써요
import '@mantine/core/styles/UnstyledButton.css';
import '@mantine/core/styles/Button.css';

// ❌ 틀린 순서 – UnstyledButton 스타일이 Button 스타일을 덮어써요
import '@mantine/core/styles/Button.css';
import '@mantine/core/styles/UnstyledButton.css';

파일 목록

아래 목록에서 특정 파일을 찾을 수 없다면 그 컴포넌트는 자체 스타일이 없거나 다른 컴포넌트 위에 만들어졌다는 뜻이라는 점에 주의하세요.

더 알아보기 (Learn more)

• Mantine styles
• CSS modules