I've customized a Material-UI theme and I'm trying to incorporate an extra color into the palette.
Here's how my initial custom theme is structured:
import { ThemeOptions } from "@mui/material/styles";
export const themeOptions: ThemeOptions = {
palette: {
primary: {
main: colors.primary,
},
secondary: {
main: colors.secondary,
},
background: {
default: colors.bg,
paper: colors.bg,
},
},
};
When I attempt to add the new color "muted" to the palette, I am required to update the type as well.
To achieve this, I have introduced a CustomThemeOptions interface. However, I am facing difficulties in getting it to function properly.
Below is my latest approach:
import { ThemeOptions } from "@mui/material/styles";
interface CustomThemeOptions extends ThemeOptions {
palette: {
muted: {
main: string
}
}
}
export const themeOptions: CustomThemeOptions = {
palette: {
primary: {
main: colors.primary,
},
secondary: {
main: colors.secondary,
},
background: {
default: colors.bg,
paper: colors.bg,
},
muted: {
main: colors.muted,
}
},
};
However, the extension of the interface overrides the original palette definition causing the primary and secondary fields to be rejected.