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).
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.
Per the documentation, the <ListItemText /> component exposes the prop primaryTypographyProps, which we can use to accomplish what you're attempting in your question:
const text = {
color: "red"
};
<ListItem button>
<ListItemText primaryTypographyProps={{ style: text }} primary="MyText" />
</ListItem>
Hope that helps!