title: How to set the zIndex on the drawer component
body: <p>I am trying to acheive the <code>clipped under the app bar</code> style temporary drawer. But I can't seem to be able to set the z index on the temporary drawer.</p>
  <p>The temporary drawer in material-ui has the z-index of the <code>modal</code> component which is <code>1300</code> as mentioned in the issue I raised here <a href="https://github.com/mui-org/material-ui/issues/22562" rel="nofollow noreferrer">https://github.com/mui-org/material-ui/issues/22562</a>.</p>
  <p>So, if I use the approach given in the documentation of setting the appbar zIndex to <code>theme.zIndex.modal + 1</code>, I can get the 'clipped under the app bar` effect. But that would also mean that my appbar would be above all my modals. Which is not what I desire.</p>
  <p>So, I wanted to set my temporary drawer to z-index of <code>1250</code> and my appbar's z-index to <code>1251</code> to get the desired effect without any side-effects.</p>
  <p>I am trying to set the zIndex with <code>makeStyles</code> hook as you can see in the sandbox and also the snippet below:</p>
  <pre><code>const useStyles = makeStyles((theme) =&gt; ({
    appBar: {
      zIndex: 1251
    },
    drawer: {
      width: drawerWidth,
      flexShrink: 0,
      zIndex: 1250
    },
    drawerPaper: {
      width: drawerWidth
    }
  }));
  </code></pre>
  <pre><code>&lt;AppBar position=&quot;fixed&quot; className={classes.appBar}&gt;
     .
     .
     .
  &lt;/AppBar&gt;
        
  </code></pre>
  <pre><code>&lt;Drawer
    className={classes.drawer}
    open={true}
    classes={{
      paper: classes.drawerPaper
    }}
  &gt;
     .
     .
     .
  &lt;/Drawer&gt;
  </code></pre>
  <p>codesandbox: <a href="https://codesandbox.io/s/material-demo-forked-rq1fj?file=/demo.js" rel="nofollow noreferrer">https://codesandbox.io/s/material-demo-forked-rq1fj?file=/demo.js</a></p>