一、treeNodeRef.current为空的原因及解决办法 #

你遇到的treeNodeRef.current始终为空的问题，主要有这几个核心原因：

• ref赋值时机与useEffect触发时机不匹配：treeNodeRef是用useRef创建的，它的current属性属于可变值，变化不会触发组件重新渲染。你依赖treeNodeRef的useEffect很可能在TreeNode的ref还没完成赋值时就执行了，自然拿不到内容。
• AntD TreeNode的ref并非直接指向DOM元素：Ant Design的TreeNode是封装后的组件，你直接绑定的ref可能拿到的是组件实例而非真实DOM节点，部分版本的TreeNode甚至没有暴露可访问的ref（比如早期函数组件版本未做forwardRef处理）。
• key的匹配逻辑可能有问题：你用key作为数组下标赋值treeNodeRef.current[key]，如果key不是连续数字或和treeData的索引不对应，遍历的时候也会出现找不到元素的情况。

给你两个可行的解决思路：

1. 监听treeData变化来触发DOM操作：因为treeData变化会触发组件重新渲染，此时TreeNode已经渲染完成，我们可以在依赖treeData的useEffect里操作DOM：

useEffect(() => {
  const treeNodes = document.querySelectorAll('.ant-tree-node');
  treeNodes.forEach((node, index) => {
    node.style.backgroundColor = treeData[index].color;
  });
}, [treeData]);

2. 用React范式直接渲染样式：完全避免DOM操作，通过自定义TreeNode的title渲染来设置背景色：

<TreeNode
  title={<div style={{ backgroundColor: treeData[key].color }}>{treeData[key].title}</div>}
  key={key}
  {...otherProps}
/>

二、直接修改TreeNode样式的方式是否可行？ #

这种直接操作DOM的方式理论上能生效，但非常不推荐：

• 弊端：Ant Design的组件内部结构会随版本更新调整（比如类名、DOM层级变化），直接操作DOM会导致代码兼容性差，后续维护成本很高。
• 更优方案：通过自定义title渲染、结合treeData属性设置CSS类名，或者利用Tree组件的className配合全局CSS来实现样式定制，这才符合React的声明式编程思想。

三、修改TreeNode复选框样式的方法 #

有两种常用且可靠的方式：

1. 通过CSS覆盖AntD默认样式：AntD的复选框有固定类名，你可以在全局CSS中针对性修改：

/* 修改未选中复选框的边框颜色 */
.ant-tree-checkbox .ant-tree-checkbox-inner {
  border-color: #your-target-color;
}
/* 修改选中后复选框的背景色与边框色 */
.ant-tree-checkbox-checked .ant-tree-checkbox-inner {
  background-color: #your-target-color;
  border-color: #your-target-color;
}

如果需要给特定节点的复选框单独设置样式，可以给TreeNode添加自定义className，再通过后代选择器定位：

<TreeNode className={`custom-node-${key}`} {...otherProps} />

.custom-node-1 .ant-tree-checkbox-inner {
  border-color: red;
}

2. 用renderCheckbox自定义复选框：AntD的Tree组件提供了renderCheckbox属性，允许你完全自定义复选框组件，从而精准控制样式：

<Tree
  renderCheckbox={(props) => (
    <Checkbox
      {...props}
      className="custom-tree-checkbox"
      style={{ borderColor: '#your-color' }}
    />
  )}
  {...otherTreeProps}
>
  {/* 你的TreeNode列表 */}
</Tree>

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