[Drawer] z-index mismatch with theme.zIndex.drawer
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
(Not sure if this is a bug or not but the drawer component (with z-index 1200) is rendered inside of a modal component which has z-index of 1300)
setting AppBar z-index to theme.zIndex.drawer + 1 doesn't put AppBar to the front.
Expected behavior 🤔
The Appbar should appear on top of the drawer when setting Appar z-index to theme.zIndex.drawer + 1
Context 🔦
No response
Your environment 🌎
I'm using latest nextjs, typescript, styled-component, mui
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No source file or test is named. Start by reproducing a Drawer rendered inside a Modal with the AppBar set to theme.zIndex.drawer + 1, then inspect the component stacking behavior. Done means the AppBar appears above the Drawer in this setup, with the behavior covered by an appropriate regression test.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100