javascript - Popper菜单上的Z-Index？

Question

我有一个重现此问题的工作示例 on codesandbox.io .
我想要做的是将“坐在下面”菜单设置为 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>
    );

我在这里遇到的问题是 Button 位于 DOM 下方，从菜单中始终位于顶部。
我试过手动添加 zIndex到菜单的各个部分 - 但无济于事。
我怀疑这个问题与过渡有关。
有人可以解释这里发生了什么，我将如何解决它？

Answer 1

我删除了 disablePortal Popper 组件上的 Prop :

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

现在变成

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

查看 Popper component disablePortal prop 的 Material-UI 文档看看为什么:

Disable the portal behavior. The children stay within it's parent DOM hierarchy.

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

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component

使用 React Portal API，Material-UI Popper 组件默认呈现在父树的 DOM 层次结构之外，这解释了为什么它解决了覆盖问题。
修改后的工作代码在 codesandbox.io