How to create MUI Dialog with transparent background color?

Question

I'm trying to create a loading status indicator using MUI. But I want the background color of dialogue box as none and also want to adjust the height. But I'm not able to do it by the style option provided by them. Any solution?

Now it looks like this..

Code looks like this:

<Dialog
  open={true}
  style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
  title= 'Loading'
  titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
>
    <RefreshIndicator
      style= {{display: 'inline-block'}}
      size={50}
      left={50}
      top={30}
      loadingColor="#FF9800"
      status="loading"    
    />
</Dialog>

Answer 1

For the latest version ("@material-ui/core": "^1.2.3"), here is how it's done:

<Dialog
  {...otherProps}
  PaperProps={{
    style: {
      backgroundColor: 'transparent',
      boxShadow: 'none',
    },
  }}
>
  {/* ... your content ... */}
</Dialog>

Take note of the new PaperProps prop. It's not in the documentation but if you check out the source, they are using PaperProps as one of the props you can pass in - since this isn't in the docs, this might change with future versions though, so be careful here.

Answer 2

In material v4 or latest. You can use BackdropProps, see the online demo