CODEWITHSUNDEEP
reactjsmaterial-ui
attl
attl

Reputation: 347

MUI - Remove overlay in Drawer?

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.

Upvotes: 24

Views: 31537

Answers (8)

F&#225;bio Zangirolami
F&#225;bio Zangirolami

Reputation: 1956

Remove the backdrop and leave the background content live

<Drawer
  hideBackdrop: true
  disableEnforceFocus: true, // Prevents focus lock in the drawer
</Drawer>

Upvotes: 0

khashashin
khashashin

Reputation: 1127

MUI v5 and v6

Solution which removes the backdrop and allows interaction with the content outside of drawer component:

<Drawer
  hideBackdrop
  ModalProps={{
    sx: {
      pointerEvents: 'none',
      '& .MuiDialog-container': {
        pointerEvents: 'none'
      },
      '& .MuiPaper-root': {
        pointerEvents: 'auto'
      }
    }
  }}>
  <Content />
</Drawer>

Upvotes: 0

Lordcodeinme
Lordcodeinme

Reputation: 1

If you want the backdrop to be visible AND clickable, use slotProps:

    <Drawer
        open={true}
        onClose={toggleDrawer}
        slotProps={{
            backdrop: { style: { backgroundColor: "transparent" } },
        }}
    >

Upvotes: 0

AtanasVA
AtanasVA

Reputation: 11

It appears they deprecated the use of BackdropProps in the newer versions. I was able to remove the background and keep the 'collapse on click away' event using slotProps instead like this:

<SwipeableDrawer
      open={isOpen}
      onClose={() => {
        setIsOpen(false);
      }}
      onOpen={() => setIsOpen(true)}
      slotProps={{
        backdrop: {
          invisible: false
        }
      }}
    >

Upvotes: 1

el-j
el-j

Reputation: 66

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",
            },
          },
        },
      }}
    >

Upvotes: 3

Harry Riley
Harry Riley

Reputation: 333

In later versions of Material UI you can just use the following:

<Drawer
 hideBackdrop
>

Upvotes: 7

Petar Dzhunov
Petar Dzhunov

Reputation: 61

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 :)

Upvotes: 3

Ryan Cogswell
Ryan Cogswell

Reputation: 80966

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>
  );
}

Edit Invisible Backdrop

Relevant documentation links:

Upvotes: 37

Related Questions