I'm trying to override one of the colors in the mui palette in my typescript project. I created a createPalette.d.ts file with the following:
import type { PaletteOptions, Palette } from '@mui/material/styles';
declare module '@mui/material/styles' {
export interface PaletteOptions {
grey: SimplePaletteColorOptions;
}
export interface Palette {
grey: PaletteColor;
}
}
declare module '@mui/material/Button' {
export interface ButtonPropsColorOverrides {
grey: true;
}
}
I then create my theme like this:
import type { PaletteOptions } from '@mui/material/styles';
export const palette: PaletteOptions = {
grey: {
main: '#fff',
dark: '#fff',
light: '#fff',
contrastText: '#fff',
},
};
However, I get the following error:
Type '{ main: string; dark: string; light: string; contrastText: string; }' is not assignable to type 'Partial'. Object literal may only specify known properties, and 'main' does not exist in type 'Partial'.
For some reason it's not using my override type. Does anyone know how to fix this so it uses my interface definition? Thanks!