在 Material-UI 中合并主题配置设置

Question

我想在 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 };