MUI - Remove overlay in Drawer? - reactjs

Question

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.

Answer 1

You can add BackdropProps={{ invisible: true }}.
Working Example:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Drawer from "#material-ui/core/Drawer";
import Button from "#material-ui/core/Button";
import List from "#material-ui/core/List";
import ListItem from "#material-ui/core/ListItem";
import ListItemIcon from "#material-ui/core/ListItemIcon";
import ListItemText from "#material-ui/core/ListItemText";
import InboxIcon from "#material-ui/icons/MoveToInbox";
import MailIcon from "#material-ui/icons/Mail";
const useStyles = makeStyles({
list: {
width: 250
}
});
export default function TemporaryDrawer() {
const classes = useStyles();
const [state, setState] = React.useState({
top: false,
left: false,
bottom: false,
right: false
});
const toggleDrawer = (side, open) => event => {
if (
event.type === "keydown" &&
(event.key === "Tab" || event.key === "Shift")
) {
return;
}
setState({ ...state, [side]: open });
};
const sideList = side => (
<div
className={classes.list}
role="presentation"
onClick={toggleDrawer(side, false)}
onKeyDown={toggleDrawer(side, false)}
>
<List>
{["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</div>
);
return (
<div>
<Button onClick={toggleDrawer("left", true)}>Open Left</Button>
<Drawer
BackdropProps={{ invisible: true }}
open={state.left}
onClose={toggleDrawer("left", false)}
>
{sideList("left")}
</Drawer>
</div>
);
}
Relevant documentation links:
https://material-ui.com/api/backdrop/#props
Documents the invisible prop
https://material-ui.com/api/modal/#props
Documents the BackdropProps prop of Modal
https://material-ui.com/api/drawer/#import
The props of the Modal component are available when variant="temporary" is set.

Answer 2

ModalProps={{
hideBackdrop: true,
}}
That solved the problem for me :)
It removes the whole backdrop thing and you are free to press whatever you want or the same button you opened it to close it :)

Answer 3

In later versions of Material UI you can just use the following:
<Drawer
hideBackdrop
>

Answer 4

For MUI 5+ Drawer (temporary):
<Drawer
PaperProps={{
style: {
//style props for your drawer menu here
},
}}
ModalProps={{
slots: { backdrop: "div" //override the backdrop component },
slotProps: {
root: { //override the fixed position + the size of backdrop
style: {
position: "absolute",
top: "unset",
bottom: "unset",
left: "unset",
right: "unset",
},
},
},
}}
>