title: Override an @media for material-ui react componentd doesn't work
body: <p>i'd like to override a @media css on a Material UI component like these threads (<a href="https://stackoverflow.com/questions/52043271/how-to-over-ride-an-media-css-for-a-material-ui-react-component">How to over-ride an @media css for a material-ui react component</a> and <a href="https://stackoverflow.com/questions/51519246/override-components-like-muitab-that-use-media-queries">Override components like MuiTab that use media queries</a>), but it doesn't to work in my case. I tried to replicate, so I can understand how it works behind and I see no results so far.</p>
  <p>What I wanted to do is override the media query in this console from <strong>'diplay: none'</strong> to <strong>'diplay: inline-flex'</strong> but it doesn't work all</p>
  <p>How can I fix this?</p>
  <p><a href="https://i.stack.imgur.com/TcZKV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TcZKV.png" alt="console" /></a></p>
  <p>I did this to override</p>
  <pre><code>const theme = createMuiTheme({
    MuiTabs: {
      scrollButtonsDesktop: {
        '@media (max-width: 599.95px)': {
          display: 'inline-flex',
        },
      },
    },
  });
  </code></pre>
  <p>In the return section:</p>
  <pre><code> return (
      &lt;React.Fragment&gt;
        &lt;Box m={5}&gt;
          &lt;ThemeProvider theme={theme}&gt;
            &lt;Grid container justify=&quot;center&quot; alignItems=&quot;flex-start&quot;&gt;
              &lt;StyledTabs variant=&quot;scrollable&quot; value={filterEvent} onChange={handleChangeEvent} aria-label=&quot;styled tabs example&quot;&gt;
                &lt;StyledTab label=&quot;AAAAAAAA&quot; value=&quot;Hiking&quot; /&gt;
                &lt;StyledTab label=&quot;AAAAAAAA&quot; value=&quot;Hiking&quot; /&gt;
                &lt;StyledTab label=&quot;AAAAAAAA&quot; value=&quot;Hiking&quot; /&gt;
                &lt;StyledTab label=&quot;AAAAAAAA&quot; value=&quot;Hiking&quot; /&gt;
                &lt;StyledTab label=&quot;AAAAAAAA&quot; value=&quot;Hiking&quot; /&gt;
                &lt;StyledTab label=&quot;AAAAAAAA&quot; value=&quot;Hiking&quot; /&gt;
                &lt;StyledTab label=&quot;AAAAAAAA&quot; value=&quot;Hiking&quot; /&gt;
              &lt;/StyledTabs&gt;
            &lt;/Grid&gt;
          &lt;/ThemeProvider&gt;
        &lt;/Box&gt;
      &lt;/React.Fragment&gt;
    );
  };
  </code></pre>
  <p>styledtabs</p>
  <pre><code>const StyledTabs = withStyles({
    indicator: {
      display: 'flex',
      justifyContent: 'center',
      backgroundColor: 'transparent',
      '&amp; &gt; span': {
        maxWidth: 80,
        width: '100%',
        backgroundColor: 'black',
      },
    },
  })((props) =&gt; &lt;Tabs {...props} TabIndicatorProps={{ children: &lt;span /&gt; }} /&gt;);
  
  const StyledTab = withStyles((theme) =&gt; ({
    root: {
      textTransform: 'none',
      color: '#000',
      fontWeight: theme.typography.fontWeightRegular,
      fontSize: theme.typography.pxToRem(18),
      '&amp;:focus': {
        opacity: 1,
      },
    },
  }))((props) =&gt; &lt;Tab disableRipple {...props} /&gt;);
  </code></pre>