Material UI: Nested component style override not applying

0
votes

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 the 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?

Edit Material demo

1
javascriptreactjsmaterial-ui

1 Answers

4
votes

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/