'Using z-index in Material UI

check this code please https://stackblitz.com/edit/react-ts-zer8p7?file=modal.js

I have the modal and inside of it the Drawer component. How can i put the Drawer component above the Modal? I tried Z-index but it didn't work.

Thank you

reactjs material-ui

Solution 1:^[1]

Put the following in your <Drawer> in drawer.js
Make it look like this:

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

and you are good to go.

Solution 2:^[2]

I don't know where you tried adding z-index but try adding:

MuiDrawer-root{
  z-index:1300;
}

style.css

Happy coding :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Fy Z1K

'Using z-index in Material UI

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]