CODEWITHSUNDEEP
cssreactjsdialogmaterial-ui
Shanika Ediriweera
Shanika Ediriweera

Reputation: 2377

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

Upvotes: 4

Views: 17713

Answers (4)

Jonas Guerra
Jonas Guerra

Reputation: 1

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/

Upvotes: 0

gaohomway
gaohomway

Reputation: 4060

Here's an easier way


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

Upvotes: 0

Nadun
Nadun

Reputation: 7853

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

Upvotes: 12

Sachin Kumar
Sachin Kumar

Reputation: 125

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

Upvotes: 6

Related Questions