Question

I have a sandbox reproducing this issue here。

我想做的是使用demonstrated on the Material-UI documentation.

的“坐在下面”菜单

   return (
      <div className={classes.root}>
        <div>
          <Button
            buttonRef={node => {
              this.anchorEl = node;
            }}
            aria-owns={open ? "menu-list-grow" : null}
            aria-haspopup="true"
            onClick={this.handleToggle}
          >
            Toggle Menu Grow
          </Button>
          <Popper open={open} anchorEl={this.anchorEl} transition disablePortal>
            {({ TransitionProps, placement }) => (
              <Grow
                {...TransitionProps}
                id="menu-list-grow"
                style={{
                  transformOrigin:
                    placement === "bottom" ? "center top" : "center bottom"
                }}
              >
                <Paper>
                  <ClickAwayListener onClickAway={this.handleClose}>
                    <MenuList>
                      <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                      <MenuItem onClick={this.handleClose}>My account</MenuItem>
                      <MenuItem onClick={this.handleClose}>Logout</MenuItem>
                    </MenuList>
                  </ClickAwayListener>
                </Paper>
              </Grow>
            )}
          </Popper>
        </div>

        <Button color="default" variant="contained">
          {" "}
          I'm a button that sits under the menu
        </Button>
      </div>
    );

我在这里的问题是菜单下方的按钮始终位于顶部。

我尝试将zIndex手动添加到菜单的各个部分-但无济于事。

我怀疑问题与过渡有关。

有人可以解释这里发生的事情吗，我该如何解决？

Answer 1

修改后的工作代码和框：https://codesandbox.io/s/4qvzkplzl4

我刚刚删除了Popper组件上的disablePortal道具：

<Popper open={open} anchorEl={this.anchorEl} transition disablePortal>

成为

<Popper open={open} anchorEl={this.anchorEl} transition>

在此处查看Popper组件“ disablePortal”道具的Material-UI文档：https://material-ui.com/api/popper/#props

禁用门户网站行为。孩子们留在其父DOM中层次结构。

默认情况下，Popper组件使用React Portal API：https://reactjs.org/docs/portals.html

门户提供了一种将子级呈现到DOM节点中的一流方法存在于父组件的DOM层次之外的

使用React Portal API，默认情况下，Material-UI Popper组件在父树的DOM层次结构之外呈现，这说明了它解决重叠问题的原因。

Answer 2

如果仍然有人希望更改z-index或想要保留disablePortal，请尝试以下方法。

方法1

为Popper提供ID

<Popper id='popper-1' .... />

现在在您的CSS文件中

#popper-1 {
 z-index: 5; // or anything higher
}

方法2

使用z-index道具在Popper本身中设置style

z-index工作代码（已启用disablePortal）here

Answer 3

对我来说，以下解决方案有效：将zIndex添加到popper。

<Popper style={{zIndex: 10000}} open={open} anchorEl={this.anchorEl} transition disablePortal>

对我来说，删除disablePortal无效

Answer 4

根据@Ricovitch的建议，从disablePortal元素中删除Popper属性或将其值设置为false <Popper open={open} anchorEl={this.anchorEl} transition disablePortal={false}>

如this所示，当disablePortal为false时，弹出元素附加到body元素，BTW是默认行为。例如，您的html结构将如下所示：

<body>
    ... existing elements ...
    <parent>
        <button />
    </parent>
    ... more elements ...
    ... attached popup menu ...
</body>

但是，当您将disablePortal设置为true时，它将具有以下html结构：

<body>
    ... existing elements ...
    <parent>
        <button />
        ... attached popup menu ...
    </parent>
    ... more elements ...
</body>

我希望这会有所帮助！

Answer 5

移动步进器：1000 快速拨号：1050 应用栏：1100 抽屉：1200 模态：1300 小吃吧：1400 工具提示：1500

<Popper style={{ zIndex: 1900 }} open={open1} anchorEl={anchorRef1.current} role={undefined} transition disablePortal>any thing in the popper </Popper>

Popper菜单上的Z索引？

5 个答案: