MUI v4如何局部设置z-index实现Popper覆盖Tooltip避免全局生效

需要实现MUI Tooltip显示在MUI Popper下方，即Popper可重叠覆盖在Tooltip上层。

• 现存问题：直接通过外部CSS覆写.MuiTooltip或.MuiTooltip-popper类的z-index属性会导致样式全局生效，无法满足局部使用要求
• 使用环境：MUI v4，异常表现为Tooltip层级高于Popper，遮盖Popper内容

不需要全局覆写MUI组件样式，以下三种方案均可实现局部调整层级，不影响其他区域组件表现：

方案1：给目标Popper单独设置更高z-index（推荐） #

MUI v4中Popper和Tooltip弹出层的默认z-index均为1500，渲染顺序靠后的元素默认层级更高，因此会出现Tooltip遮盖Popper的问题。直接给需要提高层级的单个Popper组件设置更高的行内样式即可，样式仅作用于当前Popper：

<Popper
  open={open}
  anchorEl={anchorEl}
  // 仅当前Popper生效，z-index高于默认1500即可
  style={{ zIndex: 1600 }}
>
  {/* Popper内部内容 */}
</Popper>

方案2：给单个Tooltip单独设置更低z-index #

Tooltip组件提供PopperProps属性，可直接透传属性给内部生成的弹出层元素，无需写全局CSS，仅对当前Tooltip生效：

<Tooltip
  title="提示文本"
  // 透传属性给Tooltip对应的弹出层，仅当前Tooltip生效
  PopperProps={{
    style: { zIndex: 1400 } // 低于Popper默认的1500即可
  }}
>
  <button>触发元素</button>
</Tooltip>

方案3：局部作用域CSS批量调整区域内Tooltip层级 #

如果需要批量调整某一块区域内所有Tooltip的层级，可以给区域容器加自定义类名，通过CSS嵌套选择器限制样式作用域，样式不会溢出到容器外：

{/* 自定义类名的容器 */}
<div className="custom-tooltip-area">
  {/* 该区域内所有Tooltip都会被样式影响，区域外的Tooltip不受干扰 */}
  <Tooltip title="提示1"><span>元素1</span></Tooltip>
  <Tooltip title="提示2"><span>元素2</span></Tooltip>
</div>

对应CSS代码：

/* 带父容器前缀，仅匹配容器内的Tooltip弹出层 */
.custom-tooltip-area .MuiTooltip-popper {
  z-index: 1400;
}

注意：以上方案均不需要修改MUI全局主题配置，也不需要写无作用域限制的全局类名覆写，完全不会影响其他页面/模块的组件层级表现。

内容的提问来源于stack exchange，提问作者Mehul Pamale