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

Posted 2023-02-22

【中文标题】Reactjs Material UI如何为Dialog组件设置较低的z-index

【英文标题】：Reactjs Material UI how to set a lower z-index to a Dialog component

【发布时间】：2020-11-26 02:52:41

【问题描述】：

我有一个 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，但我不知道该怎么做。我在这里错过了什么？

【参考方案1】：

你可以看看这里

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

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

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

玩得开心！

【参考方案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);

【讨论】：

zIndex 只接受数字，您正在传递字符串。它是如何工作的？

@Shashank 我们可以只通过7，但我们有!important。

我已经通过在对话框中添加 zIndex:7 作为内联样式来解决这个问题