英文:
Antd react customize directrory tree node background?
问题
如何使用Less样式在鼠标悬停在antd目录树节点上时更改树节点的默认背景颜色？
<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>
英文:
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>
答案1
得分: 0
<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>
.custom-tree .ant-tree-treenode:hover::before {
background: blue !important;
}
英文:
<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;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论