react-tooltip中HTML tooltip自定义CSS不生效如何解决

样式不生效由两个核心问题导致：

1. 写在data-tip属性里的是原生HTML字符串，不识别React的className属性，你写的className="unit-title"不会被浏览器解析为元素类名，CSS选择器自然匹配不到对应元素。
2. react-tooltip默认会把弹窗节点挂载到页面<body>标签末尾，如果你使用CSS Modules、scoped样式这类局部作用域的样式方案，局部样式的选择器作用域不覆盖body下的弹窗节点，会导致样式匹配失败。

• 替换HTML字符串内的类名属性：把data-tip字符串里所有className替换为原生HTML的class属性，修正后的元素写法示例：

<td
  data-tip={`<div class="unit-tooltip">
    <div class="unit-title">Unit:5401</div>
    <div class="unit-content">
      <ul>
        <li>Floor level 05 = 75</li>
        <li>Floor level 05 = 75</li>
      </ul>
    </div>
  </div>`}
  data-html={true}
>
  hover me
</td>

• 调整样式作用域：不要在局部作用域样式里写tooltip内部元素的样式，要么把相关样式写到全局CSS文件中，要么在CSS Modules等局部样式方案里用:global()包裹对应选择器，保证选择器能命中挂载到body下的弹窗元素，样式写法示例：

/* 全局样式或:global()包裹的局部样式 */
.unit-title {
  background-color: #f5f5f5;
  padding: 4px 8px;
  font-weight: 600;
}
.unit-tooltip {
  min-width: 140px;
  font-size: 14px;
}
.unit-content ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

• 优化rebuild逻辑：现有代码中useEffect未传依赖数组，会在组件每次重渲染时都触发ReactTooltip.rebuild()，存在不必要的性能消耗，给useEffect传入空依赖数组，仅在组件挂载时执行一次rebuild即可：

useEffect(() => {
  ReactTooltip.rebuild();
}, []);

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