Looking to make a simple adjustment in Material UI v4's (v4.11) palette, specifically adding a new field to PaletteColorOptions like darker?: string.
The type definition can be found in the relevant Material UI module:
createPalette.d.ts
export type PaletteColorOptions = SimplePaletteColorOptions | ColorPartial;
export interface SimplePaletteColorOptions {
light?: string;
main: string;
dark?: string;
contrastText?: string;
}
A recent PR on GitHub for Material UI includes an example of how to add a new Palette Color Option through module augmentation. Here is what they recommend:
declare module '@material-ui/core/styles/createMuiTheme' {
interface PaletteColor {
darker?: string
}
interface SimplePaletteColorOptions {
darker?: string
}
}
After attempting this approach, I encountered an error when trying to introduce darker to one of the color objects, indicating that the new field was not successfully added to PaletteColorOptions.
Type '{ dark: string; main: string; contrastText: string; darker: string; }' is not assignable to type 'PaletteColorOptions | undefined'. Object literal may only specify known properties, and 'darker' does not exist in type 'PaletteColorOptions'.ts(2322) createPalette.d.ts(105, 3): The expected type comes from property 'primary' which is declared here on type 'PaletteOptions'
Even after trying to define similar structures in the createPalette module using module augmentation, the same TypeScript error persists.
declare module '@material-ui/core/styles/createPalette' {
interface PaletteColor {
darker?: string
}
interface PaletteColorOptions {
darker?: string
}
}
Any advice on resolving this issue would be greatly appreciated.