How to set the zIndex on the drawer component

Question

I am trying to acheive the clipped under the app bar style temporary drawer. But I can't seem to be able to set the z index on the temporary drawer.

The temporary drawer in material-ui has the z-index of the modal component which is 1300 as mentioned in the issue I raised here https://github.com/mui-org/material-ui/issues/22562.

So, if I use the approach given in the documentation of setting the appbar zIndex to theme.zIndex.modal + 1, 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.

So, I wanted to set my temporary drawer to z-index of 1250 and my appbar's z-index to 1251 to get the desired effect without any side-effects.

I am trying to set the zIndex with makeStyles hook as you can see in the sandbox and also the snippet below:

const useStyles = makeStyles((theme) => ({
  appBar: {
    zIndex: 1251
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    zIndex: 1250
  },
  drawerPaper: {
    width: drawerWidth
  }
}));

<AppBar position="fixed" className={classes.appBar}>
   .
   .
   .
</AppBar>
      

<Drawer
  className={classes.drawer}
  open={true}
  classes={{
    paper: classes.drawerPaper
  }}
>
   .
   .
   .
</Drawer>

codesandbox: https://codesandbox.io/s/material-demo-forked-rq1fj?file=/demo.js

Answer 1

If you don't want to use important! you can override zIndex either by using Material-UI theme API or by inlining styles.

const theme = createMuiTheme({
  zIndex: {
    appBar: 1251,
    modal: 1250,
  }
});

...

<ThemeProvider theme={theme}>
  <Demo />
</ThemeProvider>,

The downside of this approach is that the styles is applied to all modals, so your actual modals are now below the AppBar which may not be what you want.

The second approach is to inline css style by passing styling object in the style props of your component

<AppBar
  className={classes.appBar}
  style={{ zIndex: 1251 }}
>
</AppBar>
<Drawer
  className={classes.drawer}
  style={{ zIndex: 1250 }}
>

Live Demo

Answer 2

Your z-index: 1250 is overriden by inline z-index: 1300 addded by material-ui. You can override this inline style by adding !important to your custom z-index.

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex"
  },
  appBar: {
    zIndex: 1251
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    zIndex: "1250 !important"
  },
  ...
}));