title: Material UI Toggle Button - can't change background color when selected
body: <p>I'm trying to use the Material UI Toggle Button kind of like a radio button to give the user 2 choices to a given question.</p>
  <p>It's functioning mostly as expected, but when trying to adjust the style for when each toggle button is selected, I can't get the Toggle Button background color to change. I'm using the classes prop on the ToggleButton component, and using the &quot;selected&quot; rule within that prop.
  Certain css properties (such as padding &amp; boxShadow) are working, but others (including backgroundColor) are not. My goal is to make the Toggle button have a blue background when selected, but so far I can't get it to display differently than the darker grey background when selected.</p>
  <p>I'm using React, along with Formik and Formik-Material-UI. Here is my code:</p>
  <pre><code>const useStyles = makeStyles((theme) =&gt; ({
    toggleButton: {
      backgroundColor: 'blue',
      border: [10, 'solid', 'black'],
      padding: 10,
      boxShadow: [
        [0, 0, 0, 1, 'blue'],
      ],
  
    }
  }));
  
  export function ScheduleAndServices(props) {
    const classes = useStyles(props);
  
  return (
  
              &lt;Field 
                component={ToggleButtonGroup} 
                name=&quot;requestType&quot; 
                type=&quot;checkbox&quot; 
                exclusive
              &gt;
                &lt;ToggleButton 
                  value=&quot;ps&quot; 
                  aria-label=&quot;Temporary/Occasional&quot; 
                  selected={values.requestType === &quot;ps&quot; ? true : false}
                  classes={{selected: classes.toggleButton}}
                &gt;Temporary/Occasional   
                &lt;/ToggleButton&gt;
                
                &lt;ToggleButton 
                  value=&quot;reg&quot; 
                  aria-label=&quot;Regular&quot;
                  selected={values.requestType === &quot;reg&quot; ? true : false}
                &gt;Regular
                &lt;/ToggleButton&gt;
              &lt;/Field&gt;
  );
  }
  </code></pre>