Search code examples
reactjsdialogmaterial-uiz-index

Reactjs Material UI how to set a lower z-index to a Dialog component

I have a Material UI Full Screen Dialog component, but I neet it to have z-index = 7. From my browser elements inspector I have this:

enter image description here

and as you can see its z-index = 1300. This is the code of the Dialog:

return (
    <Dialog fullScreen open onClose={handleClose} TransitionComponent={Transition}>
      <AppBar className={classes.appBar} classes={{ root: classes.backColor }}>
        <Toolbar>
          <Typography variant="h6" className={classes.title}>
            Dialog Title
          </Typography>
            <Button autoFocus variant="contained" color="primary" onClick={handleClose}>Close</Button>
        </Toolbar>
        <Paper className={classes.root} style={{ margin: '10px' }} elevation={3}>
          Here I have the dialog content
        </Paper>
      </AppBar>
    </Dialog>
  );

the above code comes from https://material-ui.com/components/dialogs/ the full-screen dialog section.

The solution I am trying is coming from here: https://material-ui.com/customization/components/#overriding-styles-with-global-class-names

and is this:

const StyledDialog = withStyles({
  root: {
    position: 'fixed',
    zIndex: 7,
    right: '0px',
    bottom: '0px',
    top: '0px',
    left: '0px'
  }
})(Dialog);

...

return (
    <StyledDialog fullScreen open onClose={handleClose} TransitionComponent={Transition}>
       ...
    </StyledDialog>
)

but the result remains the same: z-index = 1300. Then I tried this other one coming from https://material-ui.com/customization/components/#overriding-with-inline-styles:

<Dialog fullScreen open onClose={handleClose} TransitionComponent={Transition} style={{
    position: 'fixed',
    zIndex: 7,
    right: '0px',
    bottom: '0px',
    top: '0px',
    left: '0px'
  }}>
       ...
    </Dialog>

And nothing new. I need to change this Dialog z-Index from 1300 to 7, but I can't figure it out how to do it. What am I missing here?

Solution

  • z-index: 1300 is set inline, and inline styles has higher precedence. You should use !important on your custom z-index.

    const StyledDialog = withStyles({
  root: {
    position: 'fixed',
    zIndex: '7 !important',
    right: '0px',
    bottom: '0px',
    top: '0px',
    left: '0px'
  }
})(Dialog);