MUI自定义主题报错：augmentColor传入的primary颜色无效，求解决

报错信息 #

Uncaught Error: MUI: The color (primary) provided to augmentColor(color) is invalid.
The color object needs to have a `main` property or a `500` property.
    at augmentColor (createPalette.js:216:1)
    at createPalette (createPalette.js:258:1)
    at createTheme (createTheme.js:26:1)
    at ./src/theme.js (theme.js:40:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/index.js (App.js:28:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)

原始代码 #

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

export const shades = {
  primary: {
    100: "#cccccc",
    200: "#999999",
    300: "#666666",
    400: "#333333",
    500: "#000000",
    600: "#000000",
  },

  secondary: {
    100: "#f7ccd2",
    200: "#ef99a4",
    300: "#e66677",
    400: "#de3349",
    500: "#d6001c",
    600: "#ab0016",
    700: "#800011",
    800: "#56000b",
    900: "#2b0006",
  },
  neutral: {
    100: "#f5f5f5",
    200: "#ecebeb",
    300: "#e2e1e1",
    400: "#d9d7d7",
    500: "#cfcdcd",
    600: "#a6a4a4",
  },
};

export const theme = createTheme({
  palette: {
    primary: shades.primary[500],
  },
  secondary: {
    main: shades.secondary[500],
  },
  neutral: {
    dark: shades.neutral[700],
    main: shades.neutral[500],
    light: shades.neutral[100],
  },
  typography: {
    fontFamily: ["Fauna One", "sans-serif"].join(","),
    fontSize: 11,
    h1: {
      fontFamily: ["Cinzel", "sans-serif"].join(","),
      fontSize: 48,
    }
  },
});

错误原因 #

1. palette.primary直接赋值为单个颜色字符串，Material-UI要求该属性必须是包含main或500字段的对象。
2. secondary和neutral配置项被放在palette对象外部，不属于正确的主题配置层级。
3. neutral.dark引用了shades.neutral[700]，但shades.neutral中没有定义该色值。

修复后的代码 #

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

export const shades = {
  primary: {
    100: "#cccccc",
    200: "#999999",
    300: "#666666",
    400: "#333333",
    500: "#000000",
    600: "#000000",
  },

  secondary: {
    100: "#f7ccd2",
    200: "#ef99a4",
    300: "#e66677",
    400: "#de3349",
    500: "#d6001c",
    600: "#ab0016",
    700: "#800011",
    800: "#56000b",
    900: "#2b0006",
  },
  neutral: {
    100: "#f5f5f5",
    200: "#ecebeb",
    300: "#e2e1e1",
    400: "#d9d7d7",
    500: "#cfcdcd",
    600: "#a6a4a4",
    // 补充700色值，也可直接替换为已存在的600色值
    700: "#7f7d7d"
  },
};

export const theme = createTheme({
  palette: {
    // 传入包含500属性的对象，MUI自动识别500作为主色
    primary: shades.primary,
    // 将secondary移至palette内部
    secondary: {
      main: shades.secondary[500],
      // 也可直接传入shades.secondary，让MUI自动生成全色系
      // secondary: shades.secondary,
    },
    // 将neutral移至palette内部，并修正色值引用
    neutral: {
      dark: shades.neutral[700],
      main: shades.neutral[500],
      light: shades.neutral[100],
    },
  },
  typography: {
    fontFamily: ["Fauna One", "sans-serif"].join(","),
    fontSize: 11,
    h1: {
      fontFamily: ["Cinzel", "sans-serif"].join(","),
      fontSize: 48,
    }
  },
});

关键修复点说明 #

• primary配置：将shades.primary[500]改为shades.primary，符合MUI对调色板颜色对象的要求；也可显式写成{ main: shades.primary[500] }，效果一致。
• 层级修正：所有调色板相关配置必须放在palette对象内部，否则MUI无法识别。
• 色值引用修复：补充shades.neutral[700]的色值，或把neutral.dark改为已存在的shades.neutral[600]，避免找不到对应色值的问题。

内容的提问来源于stack exchange，提问作者David-JSON