如何为AntD Tree节点添加CSS类？实现目录名称加粗显示

当然可以，AntD Tree 支持在节点的JSON数据中指定类名，以此实现目录名称粗体显示的需求，具体做法如下：

• 构造带类名的节点数据
  在定义树形结构的JSON数组时，给目录类型的节点添加className字段，自定义类名（比如directory-node）：

  const treeData = [
    {
      title: '文档目录',
      key: 'dir1',
      className: 'directory-node', // 目录节点专属类名
      children: [
        {
          title: '笔记.md',
          key: 'file1'
        },
        {
          title: '图片文件夹',
          key: 'dir2',
          className: 'directory-node',
          children: [
            { title: '风景.jpg', key: 'file2' }
          ]
        }
      ]
    }
  ];
  

• 编写CSS样式实现粗体
  针对自定义的类名，编写样式规则，把目录节点的内容设为粗体：

  .directory-node .ant-tree-node-content-wrapper {
    font-weight: bold;
  }
  

• 在Tree组件中使用数据
  直接将上述treeData传入Tree组件的treeData属性即可，AntD会自动为对应节点应用指定的类名：

  import { Tree } from 'antd';
  
  function MyTree() {
    return <Tree treeData={treeData} />;
  }
  

如果你的场景需要更灵活的节点渲染，也可以通过Tree组件的render属性自定义节点内容，在渲染时判断节点类型并添加类名，但直接在JSON数据中配置className是最简洁的方式。

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