主題作用域

了解如何在單一 Material UI 應用程式中使用多種樣式解決方案。

從 v5.12.0 版本開始，Material UI 可以與其他依賴 Emotion 或 styled-components 的組件函式庫共存——這要歸功於主題作用域。

若要執行此操作，您需要將 Material UI 的 ThemeProvider 呈現為內部提供者，並使用 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 主題將與其他函式庫分開，因此當您使用 API（例如 styled、sx 屬性和 useTheme）時，您將能夠像平常一樣存取 Material UI 的主題。

最低版本

主題作用域在 Material UI v5.12.0 版本中引入，因此請確保您正在執行該版本或更高版本。

與 Theme UI 一起使用

在 Theme UI 的提供者下方呈現 Material UI 的主題提供者，並將 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 一起使用

在 Chakra UI 的提供者下方呈現 Material UI 的主題提供者，並將 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>
  );
}