Sometimes, we want to create a React Material UI dialog with a transparent background color.

In this article, we’ll look at how to create a React Material UI dialog with a transparent background color.

How to create a React Material UI dialog with a transparent background color?

To create a React Material UI dialog with a transparent background color, we set the BackdropProps prop to an object that has the invisible property set to true.

For instance, we write:

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

export default function App() {
  return (
    <div>
      <Dialog open BackdropProps={{ invisible: true }}>
        <DialogContent>
          <DialogContentText>hello world</DialogContentText>
        </DialogContent>
      </Dialog>
    </div>
  );
}

We set the BackdropProps to { invisible: true } to remove the overlay from the dialog box.

Now the background should be transparent.

Conclusion

To create a React Material UI dialog with a transparent background color, we set the BackdropProps prop to an object that has the invisible property set to true.