How to remove the scrollbar from the React Material UI dialog?

Sometimes, we want to remove the scrollbar from the React Material UI dialog.

In this article, we’ll look at how to remove the scrollbar from the React Material UI dialog.

How to remove the scrollbar from the React Material UI dialog?

To remove the scrollbar from the React Material UI dialog, we can set the style prop of the DialogContent component.

For instance, we write:

import React from "react";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";

export default function App() {
  return (
    <div>
      <Dialog fullWidth={true} maxWidth="xl" open={true}>
        <DialogContent style={{ overflow: "hidden" }}>
          <div>hello world</div>
        </DialogContent>
      </Dialog>
    </div>
  );
}

to set the style prop to an object that sets the overflow CSS property to 'hidden'.

This will hide the scrollbar regardless of content size.

Conclusion

To remove the scrollbar from the React Material UI dialog, we can set the style prop of the DialogContent component.