1

I am trying to implement "temporary" drawer clipped under the app bar (Note: drawer variant 'temporary' and clipped under app-bar).

See to an earlier post on this subject for more context: How to set the zIndex on the drawer component . The solution suggested was to override drawer zIndex using !important.

But I get typescript error https://codesandbox.io/s/material-demo-forked-m9kxd?file=/demo.tsx&resolutionWidth=320&resolutionHeight=675

Shilpa Puranik
  • 11
  • 2

1 Answers1

0

Just remove the zIndex property on the Drawer and set the zIndex of appBar to something greater (I tried 1500 and it worked)

Victor Oliveira
  • 352
  • 2
  • 10
  • 1
    Actually, any number above `1300` should work. Reason: `Drawer` wrapper has an inline style with `z-index: 1300` – Victor Oliveira Jul 30 '21 at 02:43
  • 1300 is z-index for modal also ( drawer of variant temporary is modal internally). Now, If i set z-index on appBar, I will have issue with other modals from menu items on app bar. They need to stay above appBar. – Shilpa Puranik Jul 30 '21 at 03:08