title: How to change react Material-UI ToggleButton Color (for selected)
body: <p>I'd like to change the <code>selected</code> <code>&lt;ToggleButton ... /&gt;</code> color to my theme <code>primary</code>, but I'm struggling to make it happen.</p>
  <p>Here is my code, which fails to change the color to primary at all:</p>
  <pre><code>...
  import { ToggleButtonGroup, ToggleButton } from '@material-ui/lab'
  ...
  const useStyles = makeStyles((theme) =&gt; ({
    selected: {
      backgroundColor: theme.palette.primary.main,
      color: theme.palette.primary.main,
    },
  }))
  ...
  ...
  &lt;ToggleButtonGroup
          value={toggleIndex}
          exclusive
          size='large'
          color='primary'
          onChange={handleFileToggle}
          classes={{ selected: classes.selected }}
        &gt;
          &lt;ToggleButton value={pdfIndex} color='primary'&gt;
            PDF
          &lt;/ToggleButton&gt;
          &lt;ToggleButton value={1}&gt;Image&lt;/ToggleButton&gt;
        &lt;/ToggleButtonGroup&gt;
  </code></pre>
  <p>I <a href="https://material-ui.com/customization/components/" rel="nofollow noreferrer">read how to pass down classes</a> but I must not be doing it correctly. Any ideas?</p>
  <p>Here is the <strong>ToggleButtonGroup source code:</strong> <a href="https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js" rel="nofollow noreferrer">https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js</a></p>