Reactjs Material UI如何为Dialog组件设置较低的z-index

Question

我有一个 Material UI 全屏对话框组件，但我需要它有z-index = 7。从我的浏览器元素检查器我有这个：

你可以看到它的z-index = 1300。这是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>
  );

以上代码来自https://material-ui.com/components/dialogs/全屏对话框部分。

我正在尝试的解决方案来自这里：https://material-ui.com/customization/components/#overriding-styles-with-global-class-names

这是：

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>
)

但结果保持不变：z-index = 1300。然后我尝试了另一个来自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>

并没有什么新鲜事。我需要将此 Dialog z-Index 从 1300 更改为 7，但我不知道该怎么做。我在这里错过了什么？

Answer 1

你可以看看这里

https://material-ui.com/customization/default-theme/?expand-path=$.zIndex

请注意，这将覆盖整个主题，这意味着之后的所有对话框都将有 7

希望这将引导您走向正确的方向！

玩得开心！

Answer 2

z-index: 1300 设置为内联，内联样式优先级更高。您应该在自定义 z-index 上使用 !important。

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