I am currently working on customizing a material-ui v4 Theme
. Within our separate @our-project/ui
package, we have the following:
export declare const themeOptions: {
palette: {
// some colors missing from Palette
}
status: string;
// other properties
}
According to the instructions provided at https://v4.mui.com/guides/typescript/#customization-of-theme, I need to add properties to Theme
(and Palette
):
import { Theme } from '@material-ui/core/styles/createTheme';
declare module '@material-ui/core/styles/createTheme' {
interface Theme {
status: string;
}
// allow configuration using `createTheme`
interface ThemeOptions {
status?: string;
}
}
declare module '@material-ui/core/styles/createPalette' {
interface Palette {
green: PaletteColor;
// other colors
}
interface PaletteOptions extends DeepPartial<AdminLightPalette> {
green?: PaletteColor;
}
}
However, I want to avoid manually duplicating these properties and having to update them whenever there are changes in @our-project/ui
. The attempt to augment with
interface Theme extends typeof themeOptions
does not compile. How can I solve this issue?