Question: The [Material-UI Box component](https://material-ui.com/components/box/) 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.

Answer: 
As per Material UI doc, For the [Drawer](https://material-ui.com/components/drawers/#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](https://codesandbox.io/embed/compassionate-bas-fpbey?fontsize=14&hidenavigation=1&theme=dark), 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](https://codesandbox.io/embed/compassionate-bas-fpbey?fontsize=14&hidenavigation=1&theme=dark) example.
When using a `Drawer` with the `temporary` variant (the default), the `className` prop gets [applied to the Modal](https://github.com/mui-org/material-ui/blob/v4.9.0/packages/material-ui/src/Drawer/Drawer.js#L188) 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](https://github.com/mui-org/material-ui/blob/v4.9.0/packages/material-ui/src/Drawer/Drawer.js#L144). You can accomplish this using the [render props approach](https://material-ui.com/components/box/#overriding-material-ui-components) 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>
  );
}

```

[![Edit Box Drawer](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/box-drawer-9et2i?fontsize=14&hidenavigation=1&theme=dark)