CODEWITHSUNDEEP
reactjsmaterial-ui
VaibS
VaibS

Reputation: 1893

How to create Material UI Dialog with transparent background color?

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

Now it looks like this..

1

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>

Upvotes: 41

Views: 109365

Answers (11)

HoFa
HoFa

Reputation: 117

you can change in MUI v5 like this

<Dialog
    onClose={handleClose}
    open={open}
    slotProps={{ backdrop: { sx: { background: 'rgba(255, 255, 255, 0.25)' } } }}
  >
     {/* CONTENT */}
  </Dialog>

Upvotes: 0

NearHuscarl
NearHuscarl

Reputation: 81370

You don't have to use a transparent Dialog, Material UI exposes the Backdrop component which Dialog uses behind the scene. Backdrop lets you put any content inside a dimmed layer without having to deal with the physical container:

<Backdrop
  sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
  open={open}
  onClick={handleClose}
>
  <Stack gap={1} justifyContent="center" alignItems="center">
    <CircularProgress color="inherit" />
    <Typography>Loading...</Typography>
  </Stack>
</Backdrop>

Live Demo

Codesandbox Demo

Upvotes: 5

Seven
Seven

Reputation: 863

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

Upvotes: 23

janani
janani

Reputation: 11

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

Remove backgroundColor: 'transparent' and add BackdropProps={{invisible: true}}

Upvotes: 1

Gerardo Roza
Gerardo Roza

Reputation: 3374

Another potential alternative for this (depends on what you want to achieve) is to avoid using a Paper component for the Dialog container. For example, if you use a Box component instead, it won't be visible to the user:

<Dialog
  className="MyDialog"
  open={!!openProp}
  onClose={handleDialogClose}
  maxWidth="xl"
  PaperComponent={Box}
>

Note that by default it will still contain an 'invisible' padding (or even cover most of the screen if you use the fullWidth prop), and this can be confusing for users, since the Dialog won't get closed when clicking within this invisible component.

Upvotes: 0

MD SHAYON
MD SHAYON

Reputation: 8051

You could use BackgropProps

Whether you could use Modal itself which is a low-level component of Dialog or you could stick to Dialog it's will work for both.

<Modal BackdropProps={{ style: { backgroundColor: "green" } }} ></Modal>

<Dialog BackdropProps={{ style: { backgroundColor: "green" } }} ></Dialog>

Upvotes: -1

zephinzer
zephinzer

Reputation: 1197

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.

Upvotes: 65

Sergio Schirmer
Sergio Schirmer

Reputation: 301

Use the bodyStyle props like so:

<Dialog
  bodyStyle={{margin:0, padding:0}}
  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>

Upvotes: 2

NatashaC
NatashaC

Reputation: 532

You can set the overlayStyle prop on Dialog to change the background color, like so:

 <Dialog
  open={true}
  style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
  overlayStyle={{backgroundColor: 'transparent'}}
  title= 'Loading'
  titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
  >

Upvotes: 9

Mayank Shukla
Mayank Shukla

Reputation: 104379

Directly you can use CircularProgress with css properties, zIndex and opacity, Try this:

<CircularProgress size={2} style={Styles.mainLoader}/>

mainLoader: { 
    position: 'absolute',
    paddingTop: '15%',      
    width: '100%',
    height: '100%',
    zIndex: 1000,
    backgroundColor: '#000000',
    opacity: 0.5,
    textAlign: 'center',
}

It will cover the entire screen with .5 opacity and specified background.

Upvotes: 5

nightlyop
nightlyop

Reputation: 7975

There is the component CircularProgress which you can use directly (instead of building a loding indicator by using Dialog: http://www.material-ui.com/#/components/circular-progress

You can place the loading indicator in a div which is placed in the middle of the page:

JSX:

<div className="my-spinner">
    <CircularProgress size={59.5} />
</div>

CSS:

.my-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-
}

Upvotes: 0

Related Questions