title: How to over-ride an @media css for a material-ui react component
body: <p>In <a href="https://stackoverflow.com/questions/51958068/how-to-override-selected-color-in-theme-override-for-material-ui-for-react">this question</a> I asked how to override a css property of a material-ui component and was provided a nice example.  However, when trying to set the height of the Toolbar component I found I could not override the css due to an over arching @media specification.  The following MuiTheme spec was my approach:</p>
  
  <pre><code>const theme = createMuiTheme({
      overrides: {
          MuiToolbar: {
              regular: {
                 height: "32px",
                 minHeight: "32px"
          }
      },
    }
  });
  </code></pre>
  
  <p>Here is a visual of the css being over-ridden:</p>
  
  <p><a href="https://i.stack.imgur.com/nejGm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nejGm.png" alt="enter image description here"></a></p>
  
  <p>If I introduce a hack and add !important to the minHeight it works.  A codesandbox showing this is here: <a href="https://codesandbox.io/s/4xmr2j2ny9" rel="noreferrer">https://codesandbox.io/s/4xmr2j2ny9</a></p>
  
  <p>What is the proper way to overide an @media spec using MuiTheme?</p>