Popper菜单上的Z索引？

Question

我有一个沙箱在这里重现此问题。

我想做的是执行Material-UI文档中演示的“坐在下面”菜单。

   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

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

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

对我来说删除disablePortal不起作用

Answer 2

修改后的工作codeandbox：https ://codesandbox.io/s/4qvzkplzl4

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

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

如果有人仍然希望更改 z-index 或者如果您想继续disablePortal尝试以下方法。

方法一

给Popper一个id

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

现在在你的 CSS 文件中

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

方法二

z-index使用styleprop在 Popper 本身中设置

z-index的工作代码（启用disablePortal）在这里