要设置 Antd 树节点的标题和高度,可以使用 CSS 来实现。下面是一个示例解决方法:
首先,为树节点的标题和高度定义一个 CSS 类。例如,给树节点标题加上 .tree-node-title
类,给树节点高度加上 .tree-node
类。然后,在 CSS 文件中添加以下代码:
.tree-node-title {
font-size: 14px; /* 设置标题字体大小 */
font-weight: bold; /* 设置标题字体粗细 */
color: #333; /* 设置标题字体颜色 */
}
.tree-node {
height: 40px; /* 设置节点高度 */
line-height: 40px; /* 设置节点行高,使标题垂直居中 */
padding: 0 10px; /* 可根据需求设置左右内边距 */
}
然后,在需要使用 Antd 树节点的地方,将相应的节点添加对应的类名:
import React from "react";
import { Tree } from "antd";
import "./Tree.css"; // 引入上述 CSS 文件
const { TreeNode } = Tree;
const TreeComponent = () => {
return (
);
};
export default TreeComponent;
以上代码示例中,将树节点的标题和高度设置为 40px,并且标题的字体大小为 14px,字体粗细为粗体,字体颜色为 #333。可以根据需要调整这些值。同时,添加了适当的内边距使节点内容与边框有一定的间距。
最后,通过在 Antd 树节点中添加 className
属性,并将其值设置为相应的 CSS 类名来应用样式。