MUI - Styling text inside ListItemText

Question

I'm trying to apply style to the text inside a ListItemText (MUI):

const text = {
  color: 'red'
}

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

But the rendered Typograhy element inside is not styled at all ("MyText" is not red).

Looking at the generated code, it seems that the default CSS rules for Typography > subheading is overriding my CSS.

Thanks for your help

Edit: In the first version of the question, there was a misake ("className" instead of "style" prop on ListItemText, sorry about that).

Answer 1

I beleive the only way to achieve this right now is to use the 'disableTypography' prop of the ListItemText element.

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

This lets you embed your own text element with whatever styling you want on it.

Answer 2

this is good one, you can implement without disabling typography

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