I am interested in setting up custom theme rules in Material-UI. My goal is to create both light and dark themes and extend them with some shared settings.
My initial idea was to store the common settings for the light and dark themes in a separate variable, then merge them together. However, I encountered an issue where default values were overriding my custom settings. The 'commonSettings' variable contains all types of settings by default, even ones that I did not define. When merging, the default settings simply replaced my custom ones. If anyone has faced this issue before and knows how to successfully combine two arrays of settings into one, any guidance would be appreciated.
Here's a simple example:
const commonSettings= createMuiTheme({
breakpoints: {...},
direction: 'ltr',
typography: {...},
});
const lightThemeSettings = createMuiTheme({
palette: {...},
});
const darkThemeSettings = createMuiTheme({
palette: {...},
});
// Merge together
const lightTheme = { ...commonSettings, ...lightThemeSettings };
const darkTheme = { ...commonSettings, ...darkThemeSettings };
export default { lightTheme, darkTheme };