Javascript 如何在抽屉组件上设置zIndex

我正在尝试实现应用程序栏下的

样式临时抽屉。但我似乎无法在临时抽屉上设置z索引

material ui中的临时抽屉具有
modal
组件的z索引，该组件为
1300
，如我在这里提出的问题所述

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

因此，我想将我的临时抽屉设置为z-index of
1250
，并将我的appbar的z-index设置为
1251
，以获得所需的效果，而不产生任何副作用

我正在尝试使用
makeStyles
hook设置zIndex，正如您在沙盒和下面的代码片段中看到的那样：

const useStyles = makeStyles((theme) => ({
  appBar: {
    zIndex: 1251
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    zIndex: 1250
  },
  drawerPaper: {
    width: drawerWidth
  }
}));

您的
z-index:1250
被材料ui添加的内联
z-index:1300
覆盖。您可以通过添加
来覆盖此内联样式！重要信息
到您的自定义
z索引

const useStyles=makeStyles（（主题）=>({
根目录：{
显示：“flex”
},
appBar：{
zIndex:1251
},
出票人：{
宽度：抽屉宽度，
flexShrink:0，
zIndex：“1250！重要”
},
...
}));

如果您不想使用
重要信息您可以通过使用材质UI主题API或通过内联样式覆盖
zIndex

const theme=createMuiTheme({
zIndex：{
附件：1251，
模态：1250，
}
});
...
,

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

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

谢谢您的回复。我知道如果你真的想在css中设置一些样式，你可以使用
！重要信息
语法。但我不太喜欢使用它。还有其他方法吗？目标是覆盖内联样式；您可以创建一个外部css文件并使用一个更具体的选择器。是的，谢谢，这似乎解决了这个问题。奇怪的是，现在我的组件有
className
、
classes
和
style
道具。
<AppBar position="fixed" className={classes.appBar}>
   .
   .
   .
</AppBar>
      

<Drawer
  className={classes.drawer}
  open={true}
  classes={{
    paper: classes.drawerPaper
  }}
>
   .
   .
   .
</Drawer>