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
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 }}
>
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"
},
...
}));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With