如何使用类名将常规 JSS 类与 Material-UI 的类覆盖功能结合起来

Posted

技术标签:

【中文标题】如何使用类名将常规 JSS 类与 Material-UI 的类覆盖功能结合起来【英文标题】:How to combine a regular JSS class with Material-UI's classes override feature using classnames 【发布时间】:2018-10-06 14:32:55 【问题描述】:

我正在尝试使用 classnames 包以及 Material-UI 的 "overriding with classes" 方法为 React 中的元素分配多个类。

Here 是 MUI 文档中的一个示例,他们使用类名将多个类分配给一个元素(展开以查看示例中的源代码)。

我想做的是将我创建的一个常规类与 JSS 结合起来,一个需要覆盖 MUI 类的类。以下是课程:

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>

我只是无法弄清楚如何在语法上结合这两种方法。有什么想法吗?!

【问题讨论】:

【参考方案1】:

我估计你快到了。基本上,classes prop 不需要一串类名(这是 classnames 返回的),而是预定义的 keys 的密钥对对象和您自定义的类名。

在文档中:https://material-ui-next.com/api/list-item-text/LisItemText 接受这些值作为 classes 属性的键:rootinsetdenseprimarysecondarytextDense。所以你的 JSX 应该是这样的:

<ListItemText
    inset
    classes=
      inset: [Name of your jss clases go here]
    
>
    List item text
</ListItemText>

【讨论】:

以上是关于如何使用类名将常规 JSS 类与 Material-UI 的类覆盖功能结合起来的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 JSS 设置 Material-UI 菜单弹出框的样式?

如何在 MaterialUI 4 中使用 react-jss?

如何在`JSS`中实现`CSS`嵌套规则?

如何使用 cssinjs/jss 在 shadow root 中挂载样式

有没有办法在另一个 JSS 样式的组件中定位嵌套的 JSS 样式的组件? [JSS-nested/Styled-JSS/Material UI (React)]

JSS 中的简单选择器和嵌套选择器