Antd Tree树组件更改样式（节点选中&未选中图标，背景颜色，文字颜色，行高等），自动生成滚动条以及设置滚动条区域的颜色，快速解决简单办法

最新推荐文章于 2024-09-19 11:57:37 发布

RosyScript

最新推荐文章于 2024-09-19 11:57:37 发布

阅读量3.2k

点赞数 8

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/weixin_46127993/article/details/135404839

版权

Antd Tree树组件更改样式（选中图标，背景颜色，文字颜色，行高等），自动生成滚动条以及设置滚动条区域的颜色，快速解决简单办法

文件结构如下图

eye_close.png为未选中节点样式（灰色小眼睛图标）
eye_open.png为选中节点样式（蓝色小眼睛图标）
index.js内部写了Antd树组件
index.module.scss为样式文件，在该文件内壁更改树组件样式
文件结构

代码部分

index.js中的Tree组件部分

<Tree
   checkable
   onExpand={onExpand}
   expandedKeys={expandedKeys}
   autoExpandParent={autoExpandParent}
   onCheck={onCheck}
   checkedKeys={checkedKeys}
   onSelect={onSelect}
   selectedKeys={selectedKeys}
   treeData={treeData}
/>

index.module.scss 样式部分

使用 !important 来防止样式冲突导致样式不生效问题

//树的样式
:global(.ant-tree) {
  background: rgba(30, 35, 64, 0.8) !important;
  color: #00ffff !important;
  font-size: medium !important;
  max-height: 400px !important;
  overflow-y: auto !important;  //自动外显滚动条
}

//滚动条的背景颜色
::-webkit-scrollbar {
  background-color: rgb(55, 81, 119);
}

//滚动条的柱体颜色
::-webkit-scrollbar-thumb {
  background-color: #00ffff;
}
//树节点样式
:global(.ant-tree .ant-tree-treenode) {
  padding: 8px 0 4px 0 !important;
}
//不选中节点样式
:global(.ant-tree-checkbox .ant-tree-checkbox-inner) {
  background-image: url("./eye_close.png") !important;
  background-size: 17px 11px !important;
  background-position: -1px 2px !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: 0 !important;
}
//选中节点样式
:global(.ant-tree-checkbox.ant-tree-checkbox-checked .ant-tree-checkbox-inner) {
  background-image: url("./eye_open.png") !important;
  background-size: 17px 11px !important;
  background-position: -1px 2px !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: 0 !important;
}
//选中节点样式
:global(.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after) {
  border: 0 !important;
}