react-tooltip v4.2.21传入className/class prop未添加到对应div如何解决

解决方案 #

针对react-tooltip v4.2.21版本className不生效的问题，可按以下优先级尝试解决：

• 替换prop名称为class
  该版本对classNameprop的处理存在已知缺陷，先尝试将组件写法修改为：

  <ReactTooltip
    id={props.id}
    type="dark"
    place={props.place}
    class={classes.tooltip}
  >
    <span>{props.text}</span>
  </ReactTooltip>
  

• 手动绑定类名
  如果修改prop名称无效，可以在组件挂载后手动给生成的tooltip元素追加类名，在MyTooltip组件中增加useEffect逻辑：

  useEffect(() => {
    const targetTooltip = document.querySelector(`.__react_component_tooltip[data-id="${props.id}"]`)
    targetTooltip?.classList.add(classes.tooltip)
  }, [props.id, classes.tooltip])
  

• 降级到兼容版本
  经测试v4.2.20版本不存在该className不生效的问题，可锁定版本安装：

  npm install react-tooltip@4.2.20
  # 或yarn add react-tooltip@4.2.20
  

• 精准样式覆盖
  不想修改版本的话，也可以用属性选择器直接匹配对应tooltip写样式，不需要依赖自定义类：

  .__react_component_tooltip[data-id="替换为你的tooltip id"] {
    /* 写入你原本要写在classes.tooltip里的所有样式 */
  }
  

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