Material UI Custom theme color assign Typescript

Question

I created my own custom theme and I'm trying to assing one of the colors I created to a button, but when I'm trying to set it as:

color={theme.pallete.lightGrey}

I'm getting this error:

No overload matches this call
Overload 1 of 3, '(props: { href: string; } & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Pick<...> & CommonProps & Pick<...>): Element', gave the following error.

Does this means that you can't assign custom colors to the color attribute? Only through styling

Answer 1

If you are using typescript use the global theme approach in this case,

1. I have 2 custom colours which are neutral and backgroundSecondary so you need to register the types in material UI types

    declare module "@mui/material/styles" {
      interface CustomPalette {
        neutral: {
          main: string;
          contrastText: string;
        };
        backgroundSecondary: string;
      }
      interface Palette extends CustomPalette {}
      interface PaletteOptions extends CustomPalette {}
    }

2. Then register that button show be able to read the custom colors
   In my case I only need neutral to be read by the Button component so you do this

declare module "@mui/material/Button" {
  interface ButtonPropsColorOverrides {
    neutral: true;
  }
}

3. You set up your theme (in most cases this would have already been setup)

let theme = createTheme({
  palette: {
    primary: {
      main: "some-color",
    },
    secondary: {
      main: "some-color",
    },
    error: {
      main: "some-color",
    },
    neutral: {
      main: "#fff",
      contrastText: "#002255",
    },
    backgroundSecondary: "#f8fafc",
  },
});

4. Finally the usage

<Button variant="outlined" color="neutral"> Click Me</Button>