我正在使用 Material-UI 和 React。我有以下方法:
对于全局样式,我正在使用主题提供程序
palette: {
type: 'dark',
primary: {
main: '#123',
},
secondary: {
main: '#456',
},
对于本地样式(在组件中(,我正在使用样式:
const styles = (theme: any) => ({ ... });
export default withStyles(styles)(UperNavigationBar);
问题1: 我的基本想法是将颜色、字体等(= 全局样式(等与间距、对齐方式等(局部样式(分开。这样,我可以轻松地从浅色主题切换到深色主题。您如何看待这种方法?
问题2: 我有几种背景颜色(默认背景颜色,导航元素还有其他背景颜色也有网格(,然后是具有不同背景颜色的悬停效果等。 但是theme.pallette.backgroundColor只有两个属性。为多个组件定义更多背景颜色的最佳方法是什么?
我希望它仍然相关。
当谈到最佳实践和方法 - 我倾向于坚持使用最新的API,即useStyles。关于样式关注点的分离 - 在我看来,除非它是全局设置,否则可能会非常混乱。在这种情况下,您可能希望以文档中解释的任何方式覆盖它。
我建议您首先探索默认主题,因为它确实回答了您的大部分问题。更改主题类型时,您可以看到调色板中的值将发生变化。
您可以使用主题覆盖许多属性,还可以添加自定义变量。这将帮助您遵循您拥有的所有特定背景颜色。如果您希望这些自定义颜色与主题类型匹配 - 只需有条件地应用它们即可。