MUI - ListItemText 内的样式文本

Question

我正在尝试将样式应用于 ListItemText (MUI) 中的文本：

 const text = {
  color: 'red'
}

<ListItem button><ListItemText style={text} primary="MyText" /></ListItem>

但是渲染的 Typograhy 里面的元素根本没有样式（“MyText”不是红色的）。

查看生成的代码，似乎 Typography > 子标题的默认 CSS 规则覆盖了我的 CSS。

谢谢你的帮助

编辑：在问题的第一个版本中，有一个错误（ListItemText 上的“className”而不是“style”道具，对此感到抱歉）。

原文由 Julien Tanay 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我相信现在实现这一点的唯一方法是使用 ListItemText 元素的“disableTypography”道具。

  <ListItemText
        disableTypography
        primary={<Typography type="body2" style={{ color: '#FFFFFF' }}>MyTitle</Typography>}
      />

这使您可以使用您想要的任何样式嵌入您自己的文本元素。

原文由 Sundaram Ravi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这 是一个很好的，你可以在不禁用排版的情况下实现

<ListItemText
   classes={{ primary: this.props.classes.whiteColor }}
   primary="MyTitle"
/>

原文由 Sachin srinivasan 发布，翻译遵循 CC BY-SA 4.0 许可协议