在 Material UI 中使用 z-index

Question

请检查此代码https://stackblitz.com/edit/react-ts-zer8p7?file=modal.js

我有模态，里面有抽屉组件。如何将 Drawer 组件放在 Modal 上方？我尝试了 Z-index 但它没有用。

谢谢

Answer 1

我不知道你在哪里尝试添加 z-index 但请尝试添加：

MuiDrawer-root{
  z-index:1300;
}

至

style.css

编码愉快:)

Answer 2

将以下内容放入 <Drawer> 中 drawer.js
让它看起来像这样：

<Drawer
            anchor={anchor}
            open={state[anchor]}
            onClose={toggleDrawer(anchor, false)}
            sx={{ zIndex: 1300}}
          >

一切顺利。

在 Material UI 中使用 z-index

Using z-index in Material UI

reactjs

material-ui