I am trying to use the Drawer
component and I have noticed that when the drawer is fed the prop open={true}
, there is a default dimmed overlay on the underlying page / div.
Is there a best-practice Material-approved way to remove the dimming? I have had some partial success with setting the prop variant={"persistent"}
. This stops the dimming, but it also forces me to add a close button just to close the drawer.
What I am looking for is the drawer to be closable when clicking outside its boundary, and while it is open I would like to have the dimming go away (without resorting to a button to close the drawer).
I have looked at the docs and tried passing the prop
variant={"persistent"}
Which gets rid of the overlay, but now when I click outside the drawer it doesn't auto-close.
<Drawer
open={open}
anchor="top"
onClose={toggleDrawer}
variant={"persistent"}
modal={true}
>
I would like to have the dimming go away (without resorting to a button).
Are there any options that are Material – approved? I can try CSS hacks but I don't want to break Material's CSS or have glitchy flashes of overlay.
Best Answer
You can add
BackdropProps={{ invisible: true }}
.Working Example:
Relevant documentation links:
invisible
propBackdropProps
prop ofModal