React MUI中Tooltip标题文本无法选中的问题排查

• 问题根源：MUI Tooltip的默认样式里，弹出层容器（类名为.MuiTooltip-tooltip）被设置了pointer-events: none，这个样式会阻断内部所有元素的鼠标交互，包括文本选中操作。你给自定义Box设置pointer-events: auto无效，是因为父容器的none优先级更高，子元素的auto无法穿透生效。

• 解决方案：通过Tooltip的PopperProps直接修改弹出层容器的样式，将pointer-events设为auto：

<Tooltip
  title={
    <Box>
      <p>可选中的文本内容1</p>
      <p>可选中的文本内容2</p>
    </Box>
  }
  PopperProps={{
    sx: {
      '& .MuiTooltip-tooltip': {
        pointerEvents: 'auto',
      },
    },
  }}
>
  <InfoIcon />
</Tooltip>

• 原理说明：把弹出层容器的pointer-events改为auto后，内部元素的鼠标交互会恢复正常，文本选中、复制等操作就能正常执行了。

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