Material-UI Select 組件中 MenuItem 上的工具提示 zIndex

Question

我的問題很簡單，我有一個<Tooltip>組件圍繞着一個<Select>組件，當我單擊 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 值。

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

Answer 1

這是Material-Ui工具提示中的錯誤，我想它已在新版本中修復。

您可以通過在工具提示中添加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

Answer 2

MUI 5：對於模式和工具提示有問題的一些人，這將有所幫助：

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

Answer 3

Liam 的回答是完全錯誤的，Joe 的回答不適用於 MUI v4。

Tooltip 組件從 Popper 組件獲取其 z-index，因此僅更改 Tooltip 的 z-index 不會有任何效果。 您需要將 z-index 從工具提示傳遞給 Popper。

像這樣：

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