Material ui 材质UI样式最佳实践

我正在使用带有React的材质UI。我有以下方法：

对于全局样式，我使用ThemeProvider

    palette: {
        type: 'dark',
        primary: {
            main: '#123',
        },
        secondary: {
            main: '#456',
        },

对于本地样式（在组件中），我使用的是withStyles：

        const styles = (theme: any) => ({ ... });
        export default withStyles(styles)(UperNavigationBar);

问题1： 我的基本想法是将颜色、字体等（全局样式）与间距、对齐等（局部样式）分开。这样我就可以轻松地从浅色主题切换到深色主题。你认为这种方法怎么样

问题2： 我有几种背景色（默认背景色，导航元素也有其他背景色网格），然后有不同背景色的悬停效果等。

---

但是theme.pallette.backgroundColor只有两个属性。为几个组件定义更多背景颜色的最佳方法是什么？

我希望它仍然相关

说到最佳实践和方法，我倾向于使用最新的API，即useStyles。关于造型关注点的分离-在我看来，这可能会非常混乱，除非它是一个全球性的设置。在这种情况下，您可能希望以中解释的任何方式覆盖它

我建议您首先探索，因为它确实回答了您的大多数问题。更改主题类型时，可以看到调色板中的值将发生更改

可以使用主题覆盖许多属性，还可以添加自定义变量。这将帮助您遵循所有特定的背景颜色。如果您希望这些自定义颜色与主题类型匹配，只需有条件地应用它们