Uncaught Error: MUI: The color (primary) provided to augmentColor(color) is invalid

Question

I'm creating my own custom theme by using material design ui.But facing the given below error. It is saying the color (primary) provided to augmentColor (color) is invalid. How can i fix it?

I also gone through the MUI doc but can't fix the issue.Is there a way to solve the error so that i can use the custom styles in my app

   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,
    }
  },
});

Answer 1

I think the problem if from adding color in palette

it needs to be changed to this :

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],
    },
  },
  ...
});