Material ui 波普尔菜单上的Z索引？_Material Ui

Material ui 波普尔菜单上的Z索引？

material-ui

Material ui 波普尔菜单上的Z索引？,material-ui,Material Ui,我想做的是做“坐在下面”菜单返回( { this.anchorEl=节点； }} aria owns={open？“菜单列表增长”：null} aria haspoop=“true” onClick={this.handleToggle} > 切换菜单增长 {（{TransitionProps，placement}）=>( 轮廓我的帐户注销 )} {" "} 我是菜单下的一个按钮 ); 我这里的问题是菜单下面的按钮总是在顶部我尝试过手动将zIndex添加到菜单的各个部分，但没有效果我

我想做的是做“坐在下面”菜单

返回(
{
this.anchorEl=节点；
}}
aria owns={open？“菜单列表增长”：null}
aria haspoop=“true”
onClick={this.handleToggle}
>
切换菜单增长
{（{TransitionProps，placement}）=>(
轮廓
我的帐户
注销
)}
{" "}
我是菜单下的一个按钮
);

我这里的问题是菜单下面的按钮总是在顶部

我尝试过手动将zIndex添加到菜单的各个部分，但没有效果

我怀疑这个问题与过渡有关

有人能解释一下这里发生了什么，我该怎么解决

修改的工作代码沙盒：

我刚刚删除了提升器组件上的

disablePortal

道具：

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

变成

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

请参阅Popper组件“disablePortal”道具的材料UI文档：

禁用门户行为。孩子们呆在它的父DOM中等级制度

默认情况下，Popper组件使用React Portal API：

门户提供了将子节点渲染到DOM节点的一流方法存在于父组件的DOM层次结构之外的

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

根据@Ricovitch的建议，从

Popper

元素中删除

disablePortal

属性或将其值设置为false

如图所示，当

disablePortal

为false时，popup元素附加到

body

元素，顺便说一句，这是默认行为。例如，您的html结构如下所示：

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

我希望这有帮助

如果仍有人希望更改z-index，或者您希望保持

禁用门户

请尝试以下方法

方法1

给波普一个身份证

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

方法2

使用

style

prop在提升机本身中设置

z-index

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

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

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

对我来说，删除disablePortal不起作用

移动步进器：1000 快速拨号：1050 应用程序栏：1100 出票人：1200 模态：1300 小吃部：1400 工具提示：1500

波普尔里有什么东西吗

好的，谢谢。您是否可以添加一个答案，解释disablePortal属性的作用，以及为什么它可以解决问题？您是对的，我刚刚添加了一些细节。希望能有所帮助。虽然此代码可能会回答此问题，但提供有关此代码为什么和/或如何回答此问题的其他上下文可提高其长期价值。

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

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

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