javascript - Material-UI 工具提示 zIndex 在 Select 组件中的 MenuItem

Question

我的问题很简单，我有一个 <Tooltip> <Select> 周围的组件组件，当我单击“选择”时，工具提示显示在 MenuItems 上，如下所示:

正常行为:

不太正常的行为:

所以我保留了 Material-UI 和工具提示的所有默认值:zIndex: 1500但从我所看到的来看，MenuItem 没有。我尝试将 MenuItem 的 zIndex 设置为 1501，但它仍然具有相同的行为。

我想知道什么是将工具提示留在 MenuItem 后面的干净方法，如果这不可能，那么在打开 Select MenuItems 时隐藏工具提示...

这是我的代码:

<Tooltip title={'Filter by status'}>
    <Select value={this.state.status} onChange={this.handleChange.bind(this, Filter.Status)}>
        {statuses.sort(this.filterItemSortFn).map(item => {
            return (<MenuItem style={{zIndex: 1501}} value={item}>{item}</MenuItem>);
        })}
    </Select>
</Tooltip>

如果我将工具提示的 zIndex 设置为较小的值并且它隐藏在 menuItems 后面，但我真的不想使用默认值，因为它也会干扰其他 zIndex 值。

我做了一个代码沙箱:https://codesandbox.io/s/rn68z4xlo

Answer 1

Liam 的回答完全不正确，Joe 的回答不适用于 MUI v4。

Tooltip 组件从 Popper 组件获取其 z-index，因此仅更改 Tooltip 的 z-index 不会有任何效果。您需要将 z-index 从工具提示传递给 Popper。

像这样:

<Tooltip title={"foo"} PopperProps={{style:{zIndex:0}}}>