material-ui - Material UI 样式最佳实践

Question

我在 React 中使用 Material-UI。我有以下方法:

对于全局样式，我使用 ThemeProvider

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

对于本地样式(在组件中)，我使用 withStyles:

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

问题 1:
我的基本想法是将颜色、字体等(= 全局样式)等与间距、对齐等(本地样式)等内容分开。这样我就可以轻松地从浅色主题切换到深色主题。您如何看待这种方法？

问题2:
我有几种背景颜色(默认背景颜色，导航元素有其他背景颜色也网格)然后有不同背景颜色的悬停效果等。
但是 theme.palletette.backgroundColor 只有两个属性。为多个组件定义更多背景颜色的最佳方法是什么？

Answer 1

我希望它仍然相关。

当谈到最佳实践和方法时 - 我倾向于坚持使用最新的 API，即 useStyles。关于样式的关注点分离 - 在我看来，除非它是全局设置，否则它可能会非常困惑。在这种情况下，您可能希望以 documentation 中解释的任何方式覆盖它。 .

建议您先探索default theme因为它确实回答了您的大部分担忧。更改主题类型时，您可以看到调色板中的值会发生变化。

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