在Material-UI中合并主题配置设置 [英] Merge theme configuration settings in Material-UI

问题描述

我想在Material-UI中设置 cusom主题规则。我想制作明暗主题，并使用一些常用设置对其进行扩展。

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.

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

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.

简单示例：

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

推荐答案

感谢Ryan Cogswell 。他用正确的思想提示了我。

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

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

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

这篇关于在Material-UI中合并主题配置设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！