css 选择组件中MenuItem上的材质-UI工具提示zIndex

kknvjkwl 于 2023-02-01 发布在其他

关注(0)|答案(3)|浏览(146)

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

不太正常的行为：

因此，我保留了所有的默认值为材料-UI和工具提示它是：zIndex: 1500，但从我所看到的菜单项没有。我试图将菜单项的zIndex设置为1501，但它仍然具有相同的行为。
我想知道什么是干净的方式要么离开菜单项后面的工具提示，如果这是不可能的，然后只是隐藏工具提示时，选择菜单项打开...
下面是我的代码：

<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

css

来源：https://stackoverflow.com/questions/49198777/material-ui-tooltip-zindex-over-menuitem-in-select-component

3条答案

按热度按时间

mrphzbgm1#

这是一个错误，在材料用户界面工具提示，我猜它已经修复了新版本
可通过将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

赞(0）回复(0）举报 2023-02-01

5vf7fwbs2#

MUI 5：对于一些模式和工具提示有问题的用户，这将有所帮助：

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

赞(0）回复(0）举报 2023-02-01

epfja78i3#

Liam的答案完全不正确，Joe的答案不适用于MUI v4。
Tooltip组件从Popper组件获取其z轴索引，因此仅更改Tooltip的z轴索引将不起作用。您需要将z轴索引从Tooltip向上传递到Popper。
就像这样：

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

赞(0）回复(0）举报 2023-02-01

我来回答

css 选择组件中MenuItem上的材质-UI工具提示zIndex

3条答案

相关问题

热门标签

最新问答