react-tooltip自定义类CSS样式设置无效问题排查与解决

问题现象 #

项目中搭配信息图标使用 react-tooltip 库时，为 tooltip 元素添加了自定义类，但即便在 CSS 样式中添加 !important 声明也无法成功修改样式，border-radius、padding、font-size 等属性均未生效。曾参考 Stack Overflow 上关于 react-tooltip 文本左对齐的解决方案，也未能解决问题。

初始实现的CSS代码如下：

.tooltip {
    border-radius: 8px !important;
    padding: 8px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-size: 16px !important;
    font-weight: normal !important;
    filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 2px 10px) !important;
}

初始实现的组件代码如下：

<span className='iconInfo' data-tip data-for='myTip'>&#9432;</span> 
<ReactTooltip id='myTip' className='tooltip' place='right' effect='solid' type='light' border='true'>My Tooltip</ReactTooltip>

第一次调整尝试 #

将原先的 <text> 标签替换为 <span> 标签，移除了 span 标签上的自定义类，仅保留 tooltip 组件的类名，调整后的组件代码如下：

<span data-tip data-for='invoiceTip'>&#9432;</span> 
<ReactTooltip id='invoiceTip' className='tooltip' place='right' effect='solid' type='light' border={true}>{t('invoice_tooltip')}</ReactTooltip>

调整后样式依旧未生效，对应调整后的CSS代码如下：

.tooltip .place-right {
    border-radius: 8px !important;
    padding: 8px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px !important;
    font-weight: normal;
    /* filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 2px 10px); */
}

期间先后尝试了 .tooltip、.tooltip .place-right、.tooltip.__react_component_tooltip 等多种选择器写法，无论是否添加 !important 声明，样式均未生效。

根因定位与最终解决方案 #

最终定位到问题原因：项目中使用了多个信息图标，每个图标都单独挂载了独立的 ReactTooltip 元素，但 CSS 仅针对单个公共元素做样式定义。
正确的最佳实践是：将 ReactTooltip 元素放在组件层级末尾，与所有调用 tooltip 的元素保持同一层级即可。

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