Question

无法使用 ReactJS 在最新的 MUI v5 中设置主题

2021-12-24

669

reactjs material-ui

我正在为自己构建一个小型、简单的 Wiki；刚开始学习 React，尽管我之前一直在使用 JavaScript。

我似乎无法设置主题。我正在尝试将背景设置为黑色。我正在这样做：

  const darkMode = true;

  const theme = createTheme({
    palette: {
      type: darkMode ? 'dark' : 'light',
      background: {
        default: "#000000",
        paper: "#000000"
      }
    },
  })

然后使用以下项进行渲染：

<ThemeProvider theme={theme}>
...
</ThemeProvider>

codesandbox 项目

github repo ，尽管它还很年轻。

知道我做错了什么吗？

Answer 1

为子元素添加 CssBaseline

import CssBaseline from '@mui/material/CssBaseline';

<ThemeProvider theme={theme}>
  <CssBaseline />
...
</ThemeProvider>

参见 CssBaseline

Answer 2

您的导入有误，您需要从 /material 导入 ThemeProvider，而不是从material/styles导入，如下所示：

import { ThemeProvider } from "@mui/material";