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

Answer 2

你的代码应该可以工作。

使用下面的代码并检查控制台，您将看到两个主题之间的区别。

import React from "react";
import ReactDOM from "react-dom";
import theme from "./themes";

console.log(theme.lightTheme.palette.primary);
console.log(theme.darkTheme.palette.primary);

function App() {
  return (
    <div>
      <h1>Check the console!</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

代码沙箱：https://codesandbox.io/s/dreamy-frost-xmw2j?fontsize=14&hidenavigation=1&theme=dark