如何在抽屉组件上设置zIndex

时间:2020-09-11 23:47:07

标签: material-ui

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

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

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

因此,我想将我的临时抽屉设置为1250的z-index,将我的应用栏的{-{1}}的z-index设置为想要的效果,而没有任何副作用。

我正在尝试使用1251钩子设置zIndex,如您在沙箱以及下面的代码段中所见:

makeStyles
const useStyles = makeStyles((theme) => ({
  appBar: {
    zIndex: 1251
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    zIndex: 1250
  },
  drawerPaper: {
    width: drawerWidth
  }
}));
<AppBar position="fixed" className={classes.appBar}>
   .
   .
   .
</AppBar>
      

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

2 个答案:

答案 0 :(得分:1)

您的z-index: 1250被Material-ui添加的内联z-index: 1300覆盖。您可以通过将!important添加到自定义z-index中来覆盖此内联样式。

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

Edit Material demo (forked)

答案 1 :(得分:1)

如果您不想使用important!,则可以使用Material-UI主题API或内联样式来覆盖zIndex

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

...

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

此方法的缺点是样式应用于所有模态,因此您的实际模态现在位于AppBar以下,可能不是您想要的。

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

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

实时演示

Edit Material-UI - Overriding zIndex