代码之家 › 专栏 › 技术社区 › dwjohnston

弹出菜单上的Z索引?

material-ui

dwjohnston · 技术社区 · 7 年前

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>
    );

我这里的问题是菜单下面的按钮总是在上面。

有人能解释一下这是怎么回事吗?我该怎么解决?

2 回复 | 直到 7 年前

Ricovitch 7 年前

https://codesandbox.io/s/4qvzkplzl4

我刚取下了 disablePortal 支撑提升器组件:

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

变成

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

有关Popper组件“disablePortal”属性,请参见此处的材料UI文档: https://material-ui.com/api/popper/#props

等级制度。

https://reactjs.org/docs/portals.html

门户提供了将子节点呈现到DOM节点的一流方法

使用React Portal API,默认情况下材质UI Popper组件呈现在父树的DOM层次结构之外,这解释了为什么它解决了覆盖问题。

kiranvj 6 年前

如果还有人想改变z-指数或者你想保持 disablePortal 尝试以下方法。

方法1

给波普一个身份证

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

现在在CSS文件中

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

z-index 在波普尔本身使用 style 道具

z索引工作代码(启用disablePortal) here

Kalpesh Popat 5 年前

对我来说,下面的解决方案奏效了:向popper添加zIndex。

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

Dipen Shah 7 年前

disablePortal 属性来自 Popper 元素或将其值设置为false <Popper open={open} anchorEl={this.anchorEl} transition disablePortal={false}>

如图所示 this 禁用门户 body 元素,这是默认行为。例如,html结构如下所示:

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

但是,当你设置为真,它将具有以下html结构:

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

我希望这有帮助!

marghoob ahmad 5 年前

移动步进电机:1000 应用程序栏:1100 模态:1300 斯纳克巴:1400

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