如何在抽屉组件上设置 zIndex

IT技术 javascript reactjs material-ui z-index
2021-05-01 22:34:15

我正在尝试实现clipped under the app bar样式临时抽屉。但是我似乎无法在临时抽屉上设置 z 索引。

material-ui 中的临时抽屉具有modal组件的 z-index，1300如我在此处提出的问题https://github.com/mui-org/material-ui/issues/22562 中所述。

因此，如果我使用将 appbar zIndex 设置为文档中给出的方法theme.zIndex.modal + 1，我可以获得“在 app bar 下剪裁”的效果。但这也意味着我的 appbar 将高于我的所有模态。这不是我想要的。

所以，我想将我的临时抽屉设置为 z-index of1250和我的 appbar 的 z-index1251来获得所需的效果而没有任何副作用。

我正在尝试使用makeStyles钩子设置 zIndex，正如您在沙箱中看到的，还有下面的代码片段：

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>

代码和盒子：https ://codesandbox.io/s/material-demo-forked-rq1fj ? file =/ demo.js

2个回答

如果您不想使用important!，可以zIndex使用 Material-UI 主题 API 或内联样式进行覆盖。

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

...

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

这种方法的缺点是样式适用于所有模态，因此您的实际模态现在低于AppBar可能不是您想要的。

第二种方法是通过在组件的样式props中传递样式对象来内联 css 样式

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

现场演示

编辑 Material-UI - 覆盖 zIndex

您z-index: 1250被z-index: 1300material-ui 添加的内联覆盖。您可以通过添加!important到您的自定义z-index.

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

编辑材料演示（分叉）

其它你可能感兴趣的问题
上一篇Marlin 最小 X/Y 进给率 下一篇Monoprice i3 clone heat 关闭打印 abs