Question

我正在使用Material-UI和React。我有以下方法：

对于全局样式，我使用的是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只有两个属性。为多个组件定义更多背景色的最佳方法是什么？

Answer 1

我希望它仍然有意义。

关于最佳实践和方法-我倾向于坚持使用最新的API，即useStyles。关于样式关注点的分离，在我看来，除非是全球性的设置，否则可能会非常令人困惑。在这种情况下，您可能需要按照documentation中所述的任何方式覆盖它。

我建议您首先探索default theme，因为它确实可以解决您的大多数问题。更改主题类型时，您会看到调色板中的值将会更改。

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

重要的用户界面样式最佳做法

1 个答案: