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

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? enter image description here

cssreactjsdialogmaterial-ui


Solution 1:[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

Solution 2:[2]

Ah.. overriding material ui css is always a challenge

As you cannot directly override material-ui nested div css using style and classes. Because dialog also inherits MODAL properties for that background overlay that's why you have to use one of the props listed in Modal props and for this use-case you have to override Backdrop props listed in Modal api docs.

In simple terms just write this into your dialog 

// outside react class 
const styles = {
  root: {
    backgroundColor: "transparent"
  }
};

// In your react class 
<Dialog
  onClose={this.handleClose}
  aria-labelledby="simple-dialog-title"
  {...other}
  BackdropProps={{
  classes: {
    root: classes.root
    }
   }}
  >

I have attached working example of material ui in codesandbox. please refer below

Make sure to wrap your component using withStyles() as in example below

CodeSandBox link : https://codesandbox.io/s/5xp76wn3xp

And to hide scrollbar this is already answered here: Hide scroll bar, but while still being able to scroll

Let me know if you require more help

Solution 3:[3]

Here's an easier way


<Dialog sx={{ '& .MuiBackdrop-root': { backgroundColor: 'transparent' } }} >

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 gaohomway

Related Questions