在Select组件中，Material-UI Tooltip的zIndex优先于MenuItem。

Question

我的问题很简单，我有一个包围着 <Select> 组件的 <Tooltip> 组件，当我点击选择器时，提示框会出现在菜单项上，如下图所示:

正常行为:

不太正常的行为：

所以我将Material-UI和Tooltip的所有默认值保留下来，对于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设置为较小的值，它会隐藏在菜单项后面，但我不想使用默认值，因为它还会干扰其他zIndex值。 我制作了一个CodeSandbox：https://codesandbox.io/s/rn68z4xlo

- Antoine

---

为什么不在CSS中将您的菜单的z-index设置为更高的值，例如z-index: 1501呢？ - Chase DeAnda

MenuItem 是否设置了 position 属性？尝试使用 <MenuItem style={{zIndex: 1501, position: relative}} />。 - Chase DeAnda

是的，即使使用 style={{zIndex: 1501, position: 'relative'}}。 - Antoine

请问您能否在CodeSandBox上实时展示您的代码？ - Liam

我如何编辑MuiModal-root-XX的zIndex，如果它的名称总是在更改并且是Material-UI的默认值？ - Antoine

Answer 1

的答案完全不正确，而乔的答案不适用于MUI v4。

Tooltip组件从Popper组件获取其z-index，因此仅更改Tooltip的z-index将不起作用。您需要将z-index从Tooltip传递到Popper。

像这样：

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

- skeeter

Answer 2

这是Material-Ui Tooltip的一个bug，我猜想在新版本中已经修复了。

您可以通过为工具提示添加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

- Liam

---

我在使用弹出组件时遇到了类似的问题，我的解决方法是 <Popper style={{zIndex: 1}}>...</Popper>。 - Nikita

首先，您不能将字符串分配给zIndex，其次，这不会覆盖其初始zindex。 - Gabriel Petersson

Answer 3

MUI 5：对于一些在模态框和工具提示方面遇到问题的人，这将有所帮助：

 const Tooltiptheme = createTheme({
 components: {
    MuiTooltip: {
      styleOverrides: {
        tooltip: {
          // overrides tooltip
        },
        popper: {
         // overrides the popper
          zIndex: 700 + '!important',
        }
      },
    },
  },
  });

- Joe