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

Question

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

下面是 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>

我只是在弄清楚如何在语法上结合这两种方法时遇到了麻烦。有什么想法吗？！

Answer 1

我想你几乎到了那里。基本上，classesprop 不需要一串类名(这是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>