Categories
React Answers

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

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.