javascript - Material 用户界面 : Nested component style override not applying

Question

我是 JS 中的 CSS 新手，并且对 Material UI 中的组件样式有点困惑 - 特别是如何覆盖嵌套元素样式。我一直在关注he official docs但这没有帮助。

在我设置的样式对象中:

listItemText: {
  fontSize: 0.8,
  color: '#ccc'
},
span: {
  fontSize: 0.8,
  color: '#ccc'
}

组件看起来像:

<ListItemText
  primary={text}
  classes={{
    root: classes.listItemText,
    span: classes.span
  }}
/>

正如您在下面链接的演示中看到的，字体大小和颜色应用于父组件，但不应用于嵌套范围。如何将其应用到跨度上？

Answer 1

我明白了。每个组件都有自己的 CSS API...

如果能更清楚地记录下来就更好了。

<ListItemText
  primary={obj.label}
  classes={{
    root: classes.listItemText,
    primary: classes.listItemText
  }}
/>

https://material-ui.com/api/list-item-text/