我正在使用材料设计ui创建自己的自定义主题。但面对下面给出的错误。它说提供给augmentColor (color)的颜色(primary)无效。我怎样才能修好它?
我也通过了MUI文档，但无法解决这个问题。是否有一种方法来解决这个错误，使我可以使用自定义样式在我的应用程序
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)
theme.js:
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,
}
},
});
我认为问题在于在调色板中添加颜色
需要改成:
export const theme = createTheme({
palette: {
primary: {
main:shades.primary[500],
},
secondary: {
main: shades.secondary[500],
},
neutral: {
dark: shades.neutral[700],
main: shades.neutral[500],
light: shades.neutral[100],
},
},
...
});