选择组件中 MenuItem 上的 Material-UI 工具提示 zIndex

Question

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

正常行为：

不太正常的行为：

所以我保留了 Material-UI 和 Tooltip 的所有默认值：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 值。

我做了一个 CodeSandbox：https://codesandbox.io/s/rn68z4xlo

Answer 1

这是 Material-Ui Tooltip 中的一个错误，我猜它已经在新版本中修复了

您可以通过在工具提示中添加 zIndex 来解决此问题

  <Tooltip title={"Message"} style={{ zIndex: '1' }}>
        <Select 
          value={this.state.name}
          onChange={this.handleChange}
          input={<Input id="select-multiple" />}
          MenuProps={MenuProps}
        >
          {names.map(name => (
            <MenuItem key={name} value={name}>
              {name}
            </MenuItem>
          ))}
        </Select>
      </Tooltip>

或者如果您想在菜单打开时完全隐藏它，请使用此代码

 <Tooltip title={"Message"} 
            onClick={() => this.setState({ tooltip: !this.state.tooltip })}
          style={this.state.tooltip ? {display: 'none'}:{ zIndex: '1' }}>
            <Select 
              value={this.state.name}
              onChange={this.handleChange}
              input={<Input id="select-multiple" />}
              MenuProps={MenuProps}
            >
              {names.map(name => (
                <MenuItem key={name} value={name}>
                  {name}
                </MenuItem>
              ))}
            </Select>
          </Tooltip>

定义的工具提示状态

class MultipleSelect extends React.Component {
  state = {
    name: [],
    tooltip: false,
  };

https://codesandbox.io/s/0xrlmv96vl