title: material ui: how to change fontSize in Lists?
body: <p>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 <code>fontSize={10}</code> it seems to have no effect.</p>
  
  <p>How can I change the fontSize?</p>
  
  <p>Here is some example code, which I got from the <a href="https://codesandbox.io/s/y334rqrpp9" rel="noreferrer">Sandbox</a> on the <a href="https://material-ui.com/demos/lists/" rel="noreferrer">Material UI documentation</a>.</p>
  
  <pre><code>const styles = theme =&gt; ({
    root: {
      width: '100%',
      maxWidth: 360,
      backgroundColor: theme.palette.background.paper,
    },
  });
  
  function FolderList(props) {
    const { classes } = props;
    return (
      &lt;div className={classes.root}&gt;
        &lt;List&gt;
          &lt;ListItem&gt;
            &lt;ListItemText primary="Photos" secondary="Jan 9, 2014" /&gt;
          &lt;/ListItem&gt;
          &lt;ListItem&gt;
            &lt;ListItemText primary="Work" secondary="Jan 7, 2014" /&gt;
          &lt;/ListItem&gt;
        &lt;/List&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>