테마 스코핑

테마 스코핑 (Theme scoping)

하나의 Material UI 앱 안에서 여러 스타일링 솔루션을 함께 쓰는 법을 알아봐요. Theme UI나 Chakra UI 같은 다른 컴포넌트 라이브러리와 Material UI를 같은 앱에서 공존시키려면 테마 스코핑이라는 개념을 이해해야 해요.

출처: 문서

본문

하나의 Material UI 앱 안에서 여러 스타일링 솔루션을 함께 사용하는 방법을 알아보세요.

:::warning 스타일링 라이브러리를 두 개 이상 쓰는 것은 프로젝트에 불필요한 복잡성을 더할 수 있어요. 이 작업을 하기에는 정말 그럴 만한 이유가 있어야 하답니다. :::

v5.12.0부터 Material UI는 Emotion이나 styled-components에 의존하는 다른 컴포넌트 라이브러리와 공존할 수 있게 되었어요. 이게 가능해진 것은 바로 테마 스코핑(theme scoping) 덕분이에요.

이를 위해 Material UI의 ThemeProvider를 내부 provider로 렌더링하고, THEME_ID를 사용해서 테마를 저장하면 돼요. 아래처럼 말이죠:

import { ThemeProvider, THEME_ID, createTheme } from '@mui/material/styles';
import { AnotherThemeProvider } from 'another-ui-library';

const materialTheme = createTheme(/* your theme */);

function App() {
  return (
    <AnotherThemeProvider>
      <ThemeProvider theme={{ [THEME_ID]: materialTheme }}>
        {/* components from another library and Material UI */}
      </ThemeProvider>
    </AnotherThemeProvider>
  );
}

Material UI 테마는 다른 라이브러리와 분리되므로, styled, sx prop, useTheme 같은 API를 사용할 때 평소처럼 Material UI의 테마에 접근할 수 있어요.

최소 버전 (Minimum version)

테마 스코핑은 Material UI v5.12.0에서 도입되었으니, 해당 버전 이상을 실행 중인지 확인하세요.

Theme UI와 함께 사용하기 (Using with Theme UI)

Theme UI의 provider 아래에 Material UI의 테마 provider를 렌더링하고, materialTheme을 THEME_ID 속성에 할당하세요:

import { ThemeUIProvider } from 'theme-ui';
import { createTheme as materialCreateTheme, THEME_ID } from '@mui/material/styles';

const themeUITheme = {
  fonts: {
    body: 'system-ui, sans-serif',
    heading: '"Avenir Next", sans-serif',
    monospace: 'Menlo, monospace',
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
  },
};

const materialTheme = materialCreateTheme();

function App() {
  return (
    <ThemeUIProvider theme={themeUITheme}>
      <MaterialThemeProvider theme={{ [THEME_ID]: materialTheme }}>
        Theme UI components and Material UI components
      </MaterialThemeProvider>
    </ThemeUIProvider>
  );
}

Chakra UI와 함께 사용하기 (Using with Chakra UI)

Chakra UI의 provider 아래에 Material UI의 테마 provider를 렌더링하고, materialTheme을 THEME_ID 속성에 할당하세요:

import { ChakraProvider, extendTheme as chakraExtendTheme } from '@chakra-ui/react';
import {
  ThemeProvider as MaterialThemeProvider,
  createTheme as muiCreateTheme,
  THEME_ID,
} from '@mui/material/styles';

const chakraTheme = chakraExtendTheme();
const materialTheme = muiCreateTheme();

function App() {
  return (
    <ChakraProvider theme={chakraTheme} resetCSS>
      <MaterialThemeProvider theme={{ [THEME_ID]: materialTheme }}>
        Chakra UI components and Material UI components
      </MaterialThemeProvider>
    </ChakraProvider>
  );
}

테마 스코핑