如何通过Less样式修改Antd目录树节点鼠标悬停时的默认背景色？

要修改Antd目录树节点的悬停背景色，核心是通过Less样式覆盖组件默认样式，推荐给目标目录树添加自定义类名避免全局样式污染，具体操作如下：

第一步：给目录树添加自定义类名 #

在Tree.DirectoryTree组件上添加唯一类名（比如custom-directory-tree），确保样式仅作用于当前组件：

<Tree.DirectoryTree className="custom-directory-tree">
  {data.map((item) => {
    return (
      <Tree.TreeNode
        // @ts-ignore
        item={item}
        icon={<></>}
        key={item.user_folder_id}
        title={item.title}
      >
        {item?.data.map((node) => {
          return (
            <Tree.TreeNode
              node={node}
              key={node.node_id}
              title={node.title}
            ></Tree.TreeNode>
          );
        })}
      </Tree.TreeNode>
    );
  })}
</Tree.DirectoryTree>

第二步：用Less编写自定义悬停样式 #

利用Less嵌套语法定位节点悬停状态，按需修改背景色：

方案1：统一修改所有节点悬停色 #

.custom-directory-tree {
  .ant-tree-node {
    &:hover {
      background-color: #f0f5ff; // 替换为你需要的颜色值
      border-radius: 4px; // 可选：添加圆角优化视觉效果
    }
  }
}

方案2：区分目录/文件节点悬停色 #

如果需要给目录节点和文件节点设置不同的悬停背景色，可通过.ant-tree-node-directory类区分：

.custom-directory-tree {
  .ant-tree-node {
    // 文件节点悬停色
    &:hover {
      background-color: #f5f5f5;
    }
    // 目录节点悬停色
    &.ant-tree-node-directory:hover {
      background-color: #e6f7ff;
    }
  }
}

Antd v5专属方案 #

若使用Antd v5，可直接修改组件自动添加的.ant-tree-node-hover类：

.custom-directory-tree {
  .ant-tree-node-hover {
    background-color: #f0f5ff;
    // 若默认样式优先级过高，可临时用!important（优先通过自定义类提高权重，尽量避免使用!important）
    // background-color: #f0f5ff !important;
  }
}

注意事项 #

• 确保Less样式文件被正确引入项目，或在组件的样式模块中编写（如使用CSS Modules）。
• 避免直接修改全局.ant-tree-node样式，防止影响项目中所有Tree组件。

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