title: How do I override material-ui's tab selection color?
body: <p>I'm building a React 16.13.0 application with the materialui-tabs theme, <a href="https://material-ui.com/api/tab/" rel="noreferrer">https://material-ui.com/api/tab/</a>.  I have created these styles in my component ...</p>
  
  <pre><code>const theme = createMuiTheme({
    overrides: {
      MuiTab: {
        root: {
          "&amp;.MuiTab-root": {
            backgroundColor: "black",
            border: 0,
            borderBottom: "2px solid",
            "&amp;:hover": {
              border: 0,
              borderBottom: "2px solid",
            },
          },
          "&amp;.Mui-selected": {
            backgroundColor: "none",
            borderBottom: "2px solid #373985",
            borderColor: "#373985",
          }
        }
      }
    }
  });
  
  const useStyles = makeStyles((theme) =&gt; ({
    root: {
      width: "100%",
      flexGrow: 1,
      color: "#3739B5",
      backgroundColor: "white",
    },
    viewButtons: {
      marginTop: theme.spacing(2),
      marginBottom: theme.spacing(1),
    },
  }));
  </code></pre>
  
  <p>These are applied to</p>
  
  <pre><code>  &lt;ThemeProvider theme={theme}&gt;
    &lt;AppBar position="static"&gt;
      &lt;Tabs
        classes={classes}
        value={value}
        variant="fullWidth"
        centered
        onChange={handleChange}
        aria-label="volunteer dashboard tabs"
      &gt;
        &lt;Tab label={proposedLabel} {...a11yProps(2)} /&gt;
        &lt;Tab label={planningLabel} {...a11yProps(1)} /&gt;
        &lt;Tab label={inProgressLabel} {...a11yProps(0)} /&gt;
        &lt;Tab label={completedLabel} {...a11yProps(3)} /&gt;
      &lt;/Tabs&gt;
    &lt;/AppBar&gt;
    &lt;/ThemeProvider&gt;
  </code></pre>
  
  <p>I'm trying to change the background color of the selected tab.  Based on devtools, inspection, the class is listed as</p>
  
  <pre><code>.PrivateTabIndicator-colorSecondary-267 {
               background-color: #f50057;
  }
  
  .PrivateTabIndicator-root-265 {
              width: 100%;
               bottom: 0;
               height: 2px;
               position: absolute;
               transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  }
  </code></pre>
  
  <p>However, despite the fact I have listed that in my theme, the color appears as red, despite what I specified in my style</p>
  
  <p><a href="https://i.stack.imgur.com/rwRpO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rwRpO.png" alt="enter image description here"></a></p>
  
  <p>How can I override the border color of the selected tab?</p>