我正在尝试使用 classnames 将多个类分配给 React 中的一个元素包,以及 Material-UI 的 "overriding with classes"方法。
Here是 MUI 文档中的一个示例,其中他们使用类名将多个类分配给一个元素(展开以查看示例中的源代码)。
我想做的是将我用 JSS 创建的一个常规类与一个需要重写 MUI 类的类结合起来。以下是类(class):
const styles = {
insetListItemText: { // This will be used to target MUI's class
'&:first-child': {
paddingLeft: '1em',
},
},
link: { // This is just a normal JSS class
textDecoration: 'underline',
textDecorationColor: '#ccc',
},
}
我在这里尝试使用类名来应用这两个类:
// import classNames from 'classnames'
<ListItemText
inset
classes={
classNames({
inset: classes.insetListItemText,
[classes.link]: true
})
}
>
List item text
</ListItemText>
我只是无法弄清楚如何在句法上结合这两种方法。有什么想法吗?!
最佳答案
我想你快到了。基本上,classes
prop 不期望一串类名(这是 classnames
返回的),而是预定义的 keys
的键对对象以及您自定义的类名。
在文档中:https://material-ui-next.com/api/list-item-text/ LisItemText
接受这些值作为 classes
属性的键:root
、inset
、dense
、primary
、secondary
、textDense
。所以你的 JSX 应该是这样的:
<ListItemText
inset
classes={{
inset: [Name of your jss clases go here]
}}
>
List item text
</ListItemText>
关于javascript - 如何使用类名将常规 JSS 类与 Material-UI 的类覆盖功能结合起来,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50033719/