스타일 없는

스타일 없는 (Unstyled) 컴포넌트

Mantine을 headless UI 라이브러리로 사용하기

Mantine을 headless UI 라이브러리로 사용할 수 있어요. 그러려면 애플리케이션에서 @mantine/*/styles.css를 import 하지 않으면 돼요. 그러면 Styles API로 원하는 스타일링 솔루션을 사용해 Mantine 컴포넌트에 스타일을 적용할 수 있어요.

출처: 문서

본문

HeadlessMantineProvider

HeadlessMantineProvider는 Mantine을 headless UI 라이브러리로 사용하고 싶을 때 사용해야 하는 MantineProvider의 대안이에요. Mantine 스타일과 관련된 모든 기능을 제거해요:

Mantine 클래스가 컴포넌트에 적용되지 않아요
style 속성으로 인라인 CSS variables가 추가되지 않아요
색상 체계 관련 모든 기능이 제거돼요
전역 스타일이 생성되지 않아요

HeadlessMantineProvider의 제한사항:

색상 체계 전환이 동작하지 않아요. 애플리케이션에 dark mode가 있다면 직접 구현해야 해요.
모든 컴포넌트에서 스타일과 관련된 props(color, radius, size 등)가 효과가 없어요.
스타일에 의존하는 일부 컴포넌트(Grid, SimpleGrid, Container 등)를 사용할 수 없게 돼요.
lightHidden/darkHidden, visibleFrom/hiddenFrom props가 동작하지 않아요.
Style props는 명시적 값에서만 동작해요. 예를 들어 mt="xs"는 동작하지 않지만 mt={5}는 동작해요.

HeadlessMantineProvider를 사용하려면 getting started 가이드를 따라 MantineProvider를 HeadlessMantineProvider로 바꾸면 돼요. 애플리케이션에서 ColorSchemeScript를 사용할 필요는 없다는 점에 주의하세요; 그것은 아무 효과가 없으니 가이드의 이 부분은 무시해도 돼요.

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

function App() {
  return (
    <HeadlessMantineProvider>
      {/* Your application */}
    </HeadlessMantineProvider>
  );
}

unstyled prop

대부분의 Mantine 컴포넌트는 라이브러리 스타일을 컴포넌트에서 제거하고 처음부터 스타일링할 수 있게 해주는 unstyled prop을 지원해요. unstyled prop은 복합 컴포넌트(Tabs.Tab, Menu.Dropdown, Accordion.Control 등)에서는 지원되지 않는다는 점에 주의하세요 – 루트 컴포넌트(Tabs, Menu, Accordion 등)에서만 동작해요.

스타일 없는 Tabs 컴포넌트:

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

function Demo() {
  return (
    <Tabs defaultValue="chat" unstyled>
      <Tabs.List>
        <Tabs.Tab value="chat">Chat</Tabs.Tab>
        <Tabs.Tab value="gallery">Gallery</Tabs.Tab>
        <Tabs.Tab value="account">Account</Tabs.Tab>
      </Tabs.List>

      <Tabs.Panel value="chat">Chat panel</Tabs.Panel>
      <Tabs.Panel value="gallery">Gallery panel</Tabs.Panel>
      <Tabs.Panel value="account">Account panel</Tabs.Panel>
    </Tabs>
  );
}

unstyled prop과 headless 컴포넌트 사이의 선택

unstyled prop은 단일 컴포넌트에서 라이브러리 스타일을 제거하면서 다른 컴포넌트의 스타일은 유지하고 싶을 때 유용해요. 예를 들어 Tabs 컴포넌트가 디자인 시스템 요구사항을 충족하지 않지만 다른 모든 컴포넌트는 충족한다면, unstyled prop을 사용해 Tabs에서 스타일을 제거하고 처음부터 스타일링하면서 다른 모든 컴포넌트는 Mantine 스타일로 유지할 수 있어요.

unstyled prop은 .css 번들에서 Mantine 라이브러리 스타일을 제거하지 않는다는 점에 주의하세요 – unstyled prop이 있는 컴포넌트에 적용하지 않을 뿐이에요.

스타일 없는