Merge theme configuration settings in Material-UI

Question

I want to setup cusom theme rules in Material-UI. I want to make light and dark theme and extends them with some common settings.

I thought it would be a good idea to put the common settings for the light and dark theme into a separate variable, and then merge them together.

But I ran into the problem of overriding custom settings with default values. By default, commonSettings has all types of settings, even if I did not define them. And with merge, defaut settings simply override custom settings. So, maybe someone has already encountered this and knows how to combine two arrays of settings into one.

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 };

Answer 1

Thanks to Ryan Cogswell. He prompted me with the right thoughts.

I found working solution. You shoud pass commonSettings as arg in createMuiTheme object:

const commonSettings= {
    breakpoints: {...},
    direction: 'ltr',
    typography: {...},
};

const lightThemeSettings = createMuiTheme({
    palette: {...},
}, commonSettings // Merge together);

const darkThemeSettings = createMuiTheme({
    palette: {...},
}, commonSettings // Merge together);

export default { lightThemeSettings , darkThemeSettings };