我正在尝试实现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
答案 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"
},
...
}));
答案 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 }}
>