Search code examples
reactjsnpmantd

Antd react customize directrory tree node background?


How to change the default background color of antd directory tree node when mouseover the tree node using less styles ?


 <Tree.DirectoryTree>
        {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>


Solution

  •  <Tree.DirectoryTree className="custom-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>
    
    

    styles.less

    .custom-tree .ant-tree-treenode:hover::before {
      background: blue !important;
    }