如何在抽屉组件上设置zIndex [英] How to set the zIndex on the drawer component

问题描述

我正在尝试实现在应用栏下方的样式的临时抽屉.但是我似乎无法在临时抽屉中设置z索引.

material-ui中的临时抽屉具有 modal 组件的z-index，它是 1300 ，如我在此处提出的问题中所述

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 }}
>

Live Demo

这篇关于如何在抽屉组件上设置zIndex的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！