React项目中使用SCSS覆盖Ant Design组件样式的方法

Ant Design的Tooltip箭头样式是通过伪元素::before实现的，并非直接作用在.ant-tooltip-arrow类上，这大概率是你之前CSS方案在SCSS里不生效的核心原因。下面分两种场景给出可行方案：

场景1：项目未使用CSS Modules #

直接在全局SCSS文件中添加以下代码，注意样式优先级：

.ant-tooltip-arrow::before {
  background-color: #你的目标颜色;
  /* 若遇到样式被覆盖的情况，可临时加!important提升优先级 */
  /* background-color: #你的目标颜色 !important; */
}

场景2：项目使用了CSS Modules #

由于CSS Modules会给类名添加哈希后缀，直接写.ant-tooltip-arrow无法匹配到Antd的原生类名，需要用:global()包裹选择器：

:global(.ant-tooltip-arrow::before) {
  background-color: #你的目标颜色;
}

如果Tooltip是挂载到body上的（Antd默认行为），组件内的SCSS样式可能无法穿透到body下的Tooltip，这种情况建议把这段代码放到全局SCSS文件中，或者给目标Tooltip设置getPopupContainer属性，让它挂载到当前组件的DOM节点内：

<Tooltip 
  title="示例提示"
  getPopupContainer={(triggerNode) => triggerNode.parentNode}
>
  <button>Hover me</button>
</Tooltip>

额外提示 #

如果你的项目是基于Antd的Less定制主题搭建的，也可以直接修改@tooltip-arrow-bg变量来全局替换Tooltip箭头背景色，不需要写额外的SCSS覆盖代码。

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