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

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 mistake ("className" instead of "style" prop on ListItemText, sorry about that).

12 Answers

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

 <ListItemText disableTypography primary={<Typography variant="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!

this is good one, you can implement without disabling typography

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

 <ListItem > <Avatar style={{ backgroundColor: "#ff6f00" }}> <LabIcon /> </Avatar> <ListItemText primary={<Typography variant="h6" style={{ color: '#ff6f00' }}>Lab</Typography>} secondary="Experiments" /> </ListItem> 

MUI v5 update

You can leverage system properties in Typography to directly add styling props in the primary and secondary components inside the ListItemText:

<ListItemText primary="Photos" secondary="Jan 9, 2014" primaryTypographyProps={{ fontSize: 22, color: 'primary.main', }} secondaryTypographyProps={{ fontSize: 15, color: 'green', }} /> 

You can also use styled if you want to reuse ListItemText in multiple places:

import MuiListItemText from '@mui/material/ListItemText'; import { styled } from '@mui/material/styles'; const ListItemText = styled(MuiListItemText)({ '& .MuiListItemText-primary': { color: 'orange', }, '& .MuiListItemText-secondary': { color: 'gray', }, }); 

Live Demo

Turns out there's an even better way to do this as such:

const styles = { selected: { color: 'green', background: 'red', }, } const DashboardNagivationItems = props => ( <ListItemText classes={{ text: props.classes.selected }} primary="Scheduled Calls" /> ) export default withStyles(styles)(DashboardNagivationItems) 

You can read more about how this is done here:

Method 1

const textColor = { color: "red" }; <ListItemText primaryTypographyProps={{ style: textColor }} primary="BlodyLogic" /> 

For the Secondary Text

const secondaryColor = { color: 'green' } <ListItemText secondaryTypographyProps={{ style: secondaryColor }} secondary="If you say that you" /> 

Method 2

<ListItemText primary={ <Typography variant="caption" display="block" gutterBottom> caption text </Typography> } /> 

Custom design:

const useStyles = makeStyles({ text: { color: 'red', fontSize: 49 }, }); /.....// all make classes <ListItemText primary={ <Typography className={classes.text}> caption text </Typography> } /> 

Offical Docs

If you are using material-ui 3.x, this is how it is done:

import { withStyles } from '@material-ui/core/styles'; const styles = { listItemText: { color: 'white', }, } class YourComponent extends Component { ... render() { const { classes } = this.props; // this is magically provided by withStyles HOC. return ( <ListItem button> <ListItemIcon> <DashboardIcon /> </ListItemIcon> <ListItemText classes={{ primary: classes.listItemText }} primary="My Bookings" /> </ListItem> ); ... } export default withStyles(styles)(YourComponent); 

set all your text related styles on primary property. Sad that it's hidden so deep in the documentation.

Material v1.0

I would add something to @SundaramRavi in regards to:

• the way he is using style element which is not great as for Material v1.0 (read the very important difference between v0.16+ and v1.0.
• the way files can be structured for better separation of concern.

Whatever.styles.js

const styles = theme => ({ white: { color: theme.palette.common.white } }); exports.styles = styles; 

Whatever.js

const React = require('react'); const PropTypes = require('prop-types'); const {styles} = require('./Whatever.styles'); class Whatever extends React.Component { constructor(props) { super(props); } render() { const {classes} = this.props; return ( <div> <ListItemText disableTypography primary={ <Typography type="body2" style={{body2: classes.white}}> MyTitle </Typography> } /> </div> ); } } Whatever.propTypes = { classes: PropTypes.object.isRequired, theme: PropTypes.object.isRequired }; exports.Whatever = withStyles(styles, {withTheme: true})(Whatever); 

you can easily style text by using & span

const useStyles = makeStyles(theme => ({ listItem: { "& span": { color: "red" } } })); .. .. .. <ListItem button> <ListItemIcon> <SendIcon /> </ListItemIcon> <ListItemText className={classes.listItem} primary="Sent mail"/> </ListItem> 

If your are using "@material-ui/core": "^4.11.4" (4.X.X or newer version) then it's simple:

#1st step: Define your styles like this:

const useStyles = makeStyles((theme: Theme) => createStyles({ // Other Styling if you wish to use it root: { width: '100%', maxWidth: '36ch', backgroundColor: theme.palette.background.paper }, // Other Styling if you wish to use it inline: { display: 'inline' }, // Styling that you asked for textColor: { color: 'red' } }), ); 

#2nd step: Define a constant to use the specific Styles like this:

const AlignItemsList = (props: any) => { const classes = useStyles(); // Like this one ...... } 

#3rd step: In your ListItemText component do like this:

const AlignItemsList = (props: any) => { const classes = useStyles(); ...... <ListItemText primary="Your Text Goes Here" classes={{ primary: classes.textColor }} // Like this one ... /> }; 

#4th & final step: Just export your component normally without any other stuff, like this:

export default AlignItemsList; 

MUI v5

I recommend to you use global styles for all components. For example you can override styles when you use createTheme.

Here is small example:

export default createTheme({ components: { MuiListItemText: { styleOverrides: { root: { marginTop: 0, marginBottom: 0, }, primary: { fontSize: '1rem', }, secondary: { fontSize: '0.8rem', }, }, }, }, }); 

More details on official page