无法为 mui 组件使用自定义调色板答案

【问题标题】：Unable to use custom palette for mui component无法为 mui 组件使用自定义调色板
【发布时间】：2021-11-12 01:29:43
【问题描述】：

我正在尝试将背景颜色设置为深夜蓝色，但出现错误：

TypeError: Cannot read properties of undefined (reading '100')

检查语法后，我无法发现任何错误。我在想这似乎是一个依赖问题？

提前致谢

import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import { ThemeProvider, createTheme } from "@mui/system";

const Navbar = () => {
  const theme = createTheme({
    palette: {
      background: {
        midnightBlue: "#0A1929"
      }
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <Box sx={{ flexGrow: 1, bgColor: "background.midnightBlue"}}>
        <AppBar position="static">
          <Toolbar>
            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
              Name
            </Typography>
            <Button color="inherit">Link 1</Button>
            <Button color="inherit">Link 2</Button>
            <Button color="inherit">Link 3</Button>
            <Button color="inherit">Link 4</Button>
          </Toolbar>
        </AppBar>
      </Box>
    </ThemeProvider>
  );
};

export default Navbar;

【问题讨论】：

您使用的是哪个版本的 MUI？

标签： javascript reactjs material-ui

【解决方案1】：

所以我去查了一下，你的导入有误，应该是这样的

import { ThemeProvider, createTheme } from "@mui/material/styles";

【讨论】：

【解决方案2】：

您的导入不正确。应该是：

import { createTheme, ThemeProvider } from "@mui/material"

提示：有时当您自动导入时，某些组件会从“@mui/system”导入，这会导致此类问题，大多数情况下命名为“@mui/material”导入就足够了。

【讨论】：