Material UI Drawer Component - Can I remove overlay it adds?

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.

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 => (
    

      
        {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
          
            
              {index % 2 === 0 ?  : }
            
            
          
        ))}
      
    
  );

  return (
    

      Open Left
      
        {sideList("left")}
      
    
  );
}

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.