Using Material-UI Box Component with the Drawer Compoment

Question

The Material-UI Box component allows us to reference other components as follows:

import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";

const NewButton = ({ children }) => (
  <Box compoment={Button} px={3} py={1} color="white" bgcolor="primary.dark">
    {children}
  </Box>
)

This works just as I want it to. However, let me now try it with the Drawer component:

import Drawer from "@material-ui/core/Drawer";
import Box from "@material-ui/core/Box";

const NewDrawer = ({ children, open }) => {
  return (
    <Box component={Drawer} width="300px" bgcolor="secondary.dark">
      {children}
    </Box>
  )
}

This does not work.

Any idea why not and how I can get it to work?

Thanks.

score 1 · Accepted Answer · answered Jan 28 '20 at 14:40

As per Material UI doc, For the Drawer component, we have to pass the open prop as true.

And also need to pass the drawer content like below,

<Drawer open={true}>{renderContents()}</Drawer>

In Box component api, we can pass the component data as a 'function'. like the below example.

import Drawer from "@material-ui/core/Drawer";
import Box from "@material-ui/core/Box";

const NewDrawer = ({ children, open }) => {
  return (
    <Box component={() => {
      return <Drawer open={true}>{renderContents()}</Drawer>
    }} width="300px" bgcolor="secondary.dark">
      {children}
    </Box>
  )
}

Refer to my code sandbox example.

This example, however, fails to affect the width or background color of the Drawer. — Ryan Cogswell, Jan 28 '20 at 15:42

score 0 · Answer 2 · answered Jan 28 '20 at 15:28

When using a Drawer with the temporary variant (the default), the className prop gets applied to the Modal which is not the element that you are trying to style.

Instead, you want to apply the styles from the Box to the Paper element within the Drawer. You can accomplish this using the render props approach for the Box children as shown in my example below.

import React from "react";
import Drawer from "@material-ui/core/Drawer";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";

const BoxDrawer = explicitProps => {
  return (
    <Box width="300px" bgcolor="secondary.dark">
      {({ className }) => (
        <Drawer {...explicitProps} PaperProps={{ className: className }} />
      )}
    </Box>
  );
};
export default function App() {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="App">
      <Button variant="contained" onClick={() => setOpen(!open)}>
        Open Drawer
      </Button>
      <BoxDrawer open={open} onClose={() => setOpen(false)}>
        <div style={{ textAlign: "center" }}>
          <h1>Hello CodeSandbox</h1>
          <Button variant="contained" onClick={() => setOpen(!open)}>
            Close Drawer
          </Button>
        </div>
      </BoxDrawer>
    </div>
  );
}

Using Material-UI Box Component with the Drawer Compoment

2 Answers2

Linked