react-tooltip样式异常求助：箭头显示粗糙不平滑

• 检查全局伪元素重置规则
  不少项目会给*::before/*::after设置全局样式，比如强制的border-style、outline或box-shadow，这些规则会覆盖react-tooltip箭头伪元素的默认样式。用浏览器开发者工具选中箭头元素（通常是.react-tooltip-arrow或对应伪元素），查看已应用样式里被划掉的属性，就能定位冲突的CSS规则。

• 验证全局transform/filter属性影响
  如果项目给body、#root这类父容器设置了transform: translateZ(0)或filter: blur(0)这类触发GPU加速的属性，可能导致箭头的矢量渲染异常，出现锯齿。可以临时移除这些全局属性测试是否恢复正常。

• 排查缩放或像素对齐设置
  若项目中有全局的zoom属性、transform: scale()，或是开启了image-rendering: pixelated，会破坏tooltip箭头的平滑渲染。通过开发者工具查看tooltip容器的计算样式，确认是否存在非预期的缩放或渲染模式。

• 检查CSS变量覆盖情况
  React-Tooltip通常用CSS变量控制箭头样式（比如--rt-arrow-size、--rt-arrow-color），如果项目全局重写了这些变量，可能导致箭头形状异常。在开发者工具的元素样式面板查看这些变量的实际值，对比组件默认值确认是否被篡改。

• 隔离组件样式测试
  给react-tooltip组件套一个独立容器，用all: revert强制重置容器内所有样式，再逐步放开规则定位冲突源：

  .tooltip-isolate-container * {
    all: revert;
  }
  

  若箭头恢复平滑，说明是全局样式导致的问题，再逐步排查具体冲突规则。

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