How to make Material UI v1.0 Dialog background transparent?

Issue

I am trying to make put a CircularProgress inside a dialog box. But the dialog box background is white and cannot be set to transparent as in earlier version - Material UI v0.2

style={{
    width: '200px',
    marginLeft: '40%',
    backgroundColor: 'transparent'
}}

I need to make the dialog background transparent. Here is my code:

<Dialog
      bodyStyle={{margin: 0, padding: 0}}
      open={true}
      style={{
        width: '200px',
        marginLeft: '40%',
        backgroundColor: 'transparent'
      }}
      overlayStyle={{backgroundColor: 'transparent'}}
    >
      <CircularProgress
        style={{display: 'inline-block'}}
        size={50}
        color={"#00db49"}
      />
</Dialog>

And how to remove the scrollbar in the dialog as shown in the image?

Solution

you can override the Paper element css properties using PaperProps property in Dialog component. (from here : https://material-ui.com/api/dialog/)

as an example :

    <Dialog
      onClose={this.handleClose}
      aria-labelledby="simple-dialog-title"
      {...other}
      BackdropProps={{
        classes: {
         root: classes.root
        }
       }
      }
      PaperProps ={{
        classes: {
         root: classes.paper
        }
      }}
      >
      <DialogTitle id="simple-dialog-title">Set backup 
 account
      </DialogTitle>
       // code you want is here   
    </Dialog>

and paper style should be provided as this:

const styles = {
  root: {
    backgroundColor: "transparent"
  },

  paper: {
    backgroundColor: "transparent",
    boxShadow: "none",
    overflow: "hidden"
  },
};

hope this will help you and here is a working example: https://codesandbox.io/s/j3wmyv7w2w

Answered By - Nadun