Sometimes, we want to change the height of the drawer with React Material UI.

In this article, we’ll look at how to change the height of the drawer with React Material UI.

How to change the height of the drawer with React Material UI?

To change the height of the drawer with React Material UI, we can set the PaperProps prop to an object with the style property.

For instance, we write:

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

export default function App() {
  return (
    <Drawer open PaperProps={{ style: { height: "90vh" } }}>
      <MenuItem>Menu Item</MenuItem>
      <MenuItem>Menu Item 2</MenuItem>
    </Drawer>
  );
}

We add the drawer by adding the Drawer component.

Then we set the PaperProps prop to { style: { height: "90vh" } } to set the drawer’s height to 90vh.

Finally, we add some MenuItems in the Drawer to add some content into the drawer.

Conclusion

To change the height of the drawer with React Material UI, we can set the PaperProps prop to an object with the style property.