材质用户界面：嵌套组件样式替换不适用

Question

I'm new to CSS in JS and I'm a bit stuck on component styles in Material UI - specifically how to override a nested element style. I've been following t he official docs but it's not helping.

In the styles object I have set:

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

The component looks like:

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

As you can see in the demo linked below, the font size and colour is getting applied to the parent component, but not the nested span. How can I apply it on the span?

Answer 1

I figured it out. Each component has it's own CSS API...

It would be better if this was documented more clearly.

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

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