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?

Nadun · Accepted Answer · 2018-06-05T05:37:55.823

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

How to make the root background have a transparent overlay? – Shanika Ediriweera Jun 06 '18 at 02:30 — Shanika Ediriweera, Jun 06 '18 at 02:30

Sachin Kumar · Answer 2 · 2018-06-03T17:29:36.803

6

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

edited Jun 03 '18 at 17:29

answered Jun 03 '18 at 15:31

Sachin Kumar

125
5

I meant the scrollbar in the dialog besides the progress. Could you please check on it. (this can be seen in the screenshot) – Shanika Ediriweera Jun 05 '18 at 03:30
The codesandbox example dialog background is not transparent? – Shanika Ediriweera Jun 05 '18 at 03:38
Hi @ShanikaEdiriweera I was not able to replicate this scenario on code sandbox https://codesandbox.io/s/535w4r82jn If you can provide link working link to the problem that would be great In the meantime, you use some CSS to remove scrollbar on a dialog try some { min-height, overflow: hidden, } on dialog root class of dialog – Sachin Kumar Jun 05 '18 at 03:42
yes its transparent in this link https://codesandbox.io/s/5xp76wn3xp do you not able to see changes ? – Sachin Kumar Jun 05 '18 at 03:47
I think you haven't understood the problem correctly. What I wanted to make transparent was not the background screen but the background of the dialog box itself. See the accepted answer. Thanks for the help. – Shanika Ediriweera Jun 06 '18 at 02:19

score 0 · Answer 3 · answered Apr 19 '22 at 06:41

0

Here's an easier way


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

answered Apr 19 '22 at 06:41

gaohomway

2,132
1
20
37

score 0 · Answer 4 · answered Jun 07 '22 at 19:08

You can use a Modal component to do that, and so, in Modal props you're going to use the prop: hideBackdrop

Just like this:

<Modal open={true} hideBackdrop >
  <your code here />
</Modal>

Here's the documentation about Modal and the "hideBackDrop" prop: https://mui.com/material-ui/api/modal/

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

4 Answers4