自定义反应材料 ui 选择背景的 z-index

Question

我在弹出窗口中有一个选择组件。它们都以 zindex: 1300 打开时渲染背景。我还有一个标签组件，我想显示在弹出框背景的顶部，但这会导致它也位于选择背景的顶部。我需要将选择背景设置为更高的数字，有没有办法自定义它？

我试图更改选择本身的 z-index 或使用背景的 id 来更改它，但是它有一个覆盖我的内联样式，我宁愿有一个更好的解决方案而不是使用 !important

这是渲染的背景

<div role="presentation" id="menu-label" style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;">

我希望我的标签位于弹出框背景的顶部，但位于所选背景的后面。

Answer 1

您可以使用 MenuProps 设置打开项的 z-index。例子：

 <Select
     MenuProps={{
         style: {zIndex: 35001}
     }}
 >
     {this.renderSelectItems()}
 </Select>`

这个属性似乎没有记录（不再？）但已经工作了很长时间了。