javascript - 合并 Material-UI 中的主题配置设置

Question

我要设置cusom theme rules in Material-UI 。我想制作浅色和深色主题，并用一些常见的设置来扩展它们。

我认为将浅色和深色主题的通用设置放入单独的变量中，然后将它们合并在一起是个好主意。

但是我遇到了用默认值覆盖自定义设置的问题。默认情况下，commonSettings 具有所有类型的设置，即使我没有定义它们。通过合并，默认设置只需覆盖自定义设置。所以，也许有人已经遇到过这种情况，并且知道如何将两个设置数组合并为一个。

简单示例:

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

感谢Ryan Cogswell 。他给了我正确的想法。

我找到了可行的解决方案。您应该在 createMuiTheme 对象中将 commonSettings 作为 arg 传递:

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

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

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

export default { lightThemeSettings , darkThemeSettings };