React MUI自定义主题后AppBar报theme.palette.grey未定义错误求助

你使用Material UI的createTheme自定义主题时，覆写palette配置的操作没有保留MUI内置的默认grey色板，导致theme.palette.grey为undefined，而AppBar组件的默认样式逻辑需要读取grey[100]/grey[900]梯度值，因此触发类型错误。

方案1：手动引入默认grey色板加入配置 #

从MUI颜色包导入内置的grey色板，显式加到你的palette配置中即可保留默认灰色梯度：

// 新增导入grey色板
import { createTheme } from '@mui/material/styles';
import { red, grey } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    // 显式加入grey色板
    grey: grey,
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#fff',
    },
  },
});

方案2：覆写AppBar默认样式跳过grey取值 #

如果你不需要使用默认灰色梯度，也可以直接在主题中指定AppBar的背景色，绕过默认的grey取值逻辑：

const theme = createTheme({
  palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#fff',
    },
  },
  // 覆写AppBar组件全局默认样式
  components: {
    MuiAppBar: {
      styleOverrides: {
        root: {
          backgroundColor: '#你想要的背景色值',
        }
      }
    }
  }
});

• 确认createTheme的导入路径正确：MUI v5为@mui/material/styles，MUI v4为@material-ui/core/styles
• 如果你需要自定义部分grey梯度，也可以自行构造包含100到900字段的grey对象传入palette，无需使用内置色板

内容的提问来源于stack exchange，提问作者user656822