javascriptreactjslistmaterial-ui

material ui: how to change fontSize in Lists?


I am creating some forms using react js and material UI. I would like to make the font size on some of the lists smaller in order to get a more compact presentation, but no matter at which level I added the code fontSize={10} it seems to have no effect.

How can I change the fontSize?

Here is some example code, which I got from the Sandbox on the Material UI documentation.

const styles = theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
});

function FolderList(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <List>
        <ListItem>
          <ListItemText primary="Photos" secondary="Jan 9, 2014" />
        </ListItem>
        <ListItem>
          <ListItemText primary="Work" secondary="Jan 7, 2014" />
        </ListItem>
      </List>
    </div>
  );
}

Solution

  • As the docs of ListItemText says you can override the primary text styles using classes props and primary key.

    Create a style

    const styles = theme => ({
      listItemText:{
        fontSize:'0.7em',//Insert your required size
      }
    });

    Apply the style to ListItemText

    <ListItemText 
                classes={{primary:classes.listItemText}}
              primary="Inbox" />

    If you want to override the secondary font size apply styles to secondary key.