material ui: how to change fontSize in Lists?

Question

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

Answer 1

For mui v5, use primaryTypographyProps prop to pass desired styles

<ListItemText 
    primaryTypographyProps={{fontSize: '18px'}} 
    primary="List Text"
/>