无法使用mui组件的自定义调色板

Question

我试图将背景颜色设置为午夜蓝色，但我遇到了一个错误：

TypeError:无法读取未定义(读取"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;

Answer 1

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

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

Answer 2

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

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

提示：有时当你自动导入时，一些组件会从"mui/系统"；这导致了这样的问题@mui/材料"；就足够了。