Material UI - Styling text inside ListItemText

Question

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

No, it is a Material-UI component : https://material-ui-1dab0.firebaseapp.com/component-api/list-item-text#listitemtext — Julien Tanay, May 15 '17 at 10:17

score 101 · Accepted Answer · edited Feb 01 '23 at 10:15

101

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.

edited Feb 01 '23 at 10:15

Ben in CA

688
8
22

answered Jun 19 '17 at 05:02

Sundaram Ravi

1,185
1
8
11

12

The prop type for typography is variant but not type. MyTitle – Hemadri Dasari Apr 22 '20 at 10:40
2

Just wasted 10 minutes because I didn't read the above comment. Thanks Hemadri <3 – Page not found Nov 20 '20 at 22:57
You could do it like this also, ```Categories``` – salman_sali Jun 22 '23 at 13:09

score 33 · Answer 2 · answered Jul 12 '19 at 18:03

33

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!

answered Jul 12 '19 at 18:03

josephemswiler

401
4
5

2

This is the best answer, without having to override the component. – a_rahmanshah Aug 18 '21 at 09:40
1

Can be used like: – Ben in CA Mar 01 '23 at 23:56

score 28 · Answer 3 · answered Sep 06 '18 at 06:09

28

this is good one, you can implement without disabling typography

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

answered Sep 06 '18 at 06:09

Sachin srinivasan

758
8
18

score 16 · Answer 4 · answered Oct 11 '18 at 15:25

16

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

answered Oct 11 '18 at 15:25

Hitesh Sahu

41,955
17
205
154

Useful, if you have to pass Dynamic Inline Styles. – Ankit Prajapati Dec 11 '18 at 18:53

score 9 · Answer 5 · answered Nov 08 '17 at 14:58

9

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: https://material-ui-next.com/customization/overrides/#overriding-with-classes

answered Nov 08 '17 at 14:58

Andre Romano

1,004
11
20

11

you should write ``. There are root `inset` `dense` `primary` `secondary` `textDense` classes to override. see https://material-ui-next.com/api/list-item-text/ – imdzeeshan Apr 19 '18 at 07:09
If `text` was a valid target before, it isn't now. – philraj Apr 16 '19 at 16:07

score 9 · Answer 6 · answered Jul 23 '20 at 04:26

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

score 9 · Answer 7 · answered Nov 10 '21 at 09:06

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

score 6 · Answer 8 · answered May 13 '19 at 18:58

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. https://material-ui.com/api/list-item/

Mick · Answer 9 · 2017-11-01T08:45:23.940

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

score 2 · Answer 10 · answered Dec 29 '19 at 17:23

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>

score 1 · Answer 11 · answered Jun 01 '21 at 01:28

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;

VeXell · Answer 12 · 2022-09-29T11:00:08.547

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

Material UI - Styling text inside ListItemText

12 Answers12

Method 1

Method 2

Live Demo

Material v1.0