title: MUI Change ListItemText styles when active in react-router
body: <p>I am currently using <code>ListItem</code> from MUI. I am trying to make it bolder when it is active but seems <code>font-weight</code> doesn't work.</p>
  <p>See below for the code.</p>
  <pre><code>&lt;List
        component='nav'
        aria-label='main mailbox folders'
      &gt;
        &lt;ListItem
          button
          component={NavLink}
          exact
          to='/accounts'
          activeClassName={classes.active}
          className={classes.appBarNavButtons}
        &gt;
          &lt;MyAccountsIcon /&gt;
          &lt;ListItemText
            style={{ marginLeft: '20px', fontSize: 'large' }}
            primary='My Accounts'
          /&gt;
        &lt;/ListItem&gt;
  &lt;/List&gt;
  </code></pre>
  <p>Style:</p>
  <pre><code>appBarNavButtons: {
    color: colors.blueGrey[800],
    textTransform: 'none',
    letterSpacing: 0,
  },
  active: {
    color: '#0056b3',
    fontWeight: 'bolder',
    '&amp; $icon': {
      color: theme.palette.primary.main,
    }
  }
  </code></pre>
  <p>Any help or suggestions will be appreciated.</p>