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

Posted

技术标签:

【中文标题】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 作为内联样式来解决这个问题

以上是关于Reactjs Material UI如何为Dialog组件设置较低的z-index的主要内容,如果未能解决你的问题,请参考以下文章

如何结合 ReactJs Router Link 和 material-ui 组件(如按钮)?

如何为 Material-ui 的组件设置主要的浅色/深色?我正在使用像这里这样的自定义主题

如何为每个 Material-UI TableRow 添加 <Link> react-router?

ReactJS + Material-UI:如何减小 Material-UI 的 <TableRow/> 的列宽?

ReactJS + Material-UI:如何使用 Material-UI 的 <DatePicker> 将当前日期设置为默认值?

ReactJS + Material-UI:如何在每个 TableRow 中使用 Material-UI 的 FlatButton 和 Dialog?