无法为MUI组件使用自定义调色板，触发读取'100'属性未定义错误

云上老周

2026-9-26

问题原因及修复方案

核心问题：主题API导入路径错误
你当前从@mui/system导入ThemeProvider和createTheme，这个包提供的是无MUI默认主题预设的基础版本，缺少完整的调色板配置，解析颜色时会尝试访问默认色阶的100属性，因此触发undefined报错。
正确导入路径为@mui/material/styles。
若你使用TypeScript开发，需要额外对Palette接口做类型扩充，才能识别自定义的midnightBlue字段，JavaScript项目无需额外处理。

修正后代码

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/material/styles";

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;