reactjs - Material-UI next - Styling text inside ListItemText

Question

i'm trying to apply style to the text inside a ListItemText (Material-UI @next):

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).

question from:https://stackoverflow.com/questions/43975839/material-ui-next-styling-text-inside-listitemtext

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.