以本地JSS样式引用全局组件类？-Java 学习之路

我正在使用material-ui做反应，而我想要做的就是在它出现在本地类中时标准材质ui组件 . 从概念上讲，类似于：

const styles = {
  localClass: {
    '& MuiGrid-item': {
      backgroundColor: 'red'
    }
  }
}

我在JSS中看到如何使用 $ 表示法引用本地类，以及如何使用 createTheme 覆盖/扩充material-ui样式，但我无法找到有关如何完成此用例的任何内容 .

2 回答

0

您有4种方法可以自定义MUI样式https://material-ui.com/customization/overrides/

回复于 2024-05-11T12:48:25+08:00
0
在继续研究之后，似乎答案是“事物的工作方式不同”，因此CSS CSS中优雅的样式在CSS JS中可能很难或完全不可能 . 在我看来，在某些情况下，CSS JS模型已经将婴儿扔出洗澡水，但现在就是这样 .

尽管如此，在许多情况下，您希望使用基于上下文的修改组件样式（=〜父组件的存在或封闭样式类）可以通过其他方式合理地完成，但它取决于具体的用例 .

如果目标是更改特定组件的行为，只需将组件直接包装在新类中 . 例如 . ：
```
const style = { root: { backgroundColor: 'red' } } 

StyledWidget = withStyle(style, 'StyledWidget')(
  () => <Widget classes={{ root: classes.root }} />
```
在您想要重复使用的地方（至少在代码级别），创建一个接受渲染组件的样式小部件，或创建一个注入样式类的更高阶组件 . 例如 . ：
```
<WidgetStyler component={TextInput} ... />
<WidgetStyler component={Buttton} />
```
要么
```
StyledWidget = withWidgetStyling(TextInput)
```
回复于 2024-05-11T12:48:25+08:00