主题作用域

了解如何在单个 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 主题将与其他库分离，因此当你使用诸如 styled、sx 属性和 useTheme 之类的 API 时，你将能够像平常一样访问 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>
  );
}