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

Question

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?

Answer 1

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