react中使用ztree,对ztree样式进行修改,ztree样式风格antd化

时间:2024-04-05 07:02:55

由于react里面使用ztree【https://blog.csdn.net/Chris__wang/article/details/86001063】  但是会发现ztree的样式风格与antd里面的tree风格大不相同,对比两者

react中使用ztree,对ztree样式进行修改,ztree样式风格antd化react中使用ztree,对ztree样式进行修改,ztree样式风格antd化react中使用ztree,对ztree样式进行修改,ztree样式风格antd化

 前两个带颜色的是ztree的,后面的是antd的, 对比发现ztree中第二个的样式是与antd最为接近的,就拿第二个来修改,首先是图标,ztree中用到的是精灵图,首先找到精灵图位置   node_modules\ztree\css\zTreeStyle\img

img文件夹中找到zTreeStandard.png,利用ps修改,我的方法是将+  -和文件图标  的颜色修改成react中的颜色,这里没有修改线,如果有需要也可以进行修改

修改前后对比【如果不想修改,可以使用下面的第二张图

react中使用ztree,对ztree样式进行修改,ztree样式风格antd化react中使用ztree,对ztree样式进行修改,ztree样式风格antd化

接着就是选中后的背景颜色,文字颜色和有无边框,悬浮颜色

这个只需要修改样式文件即可node_modules\ztree\css\zTreeStyle\zTreeStyle.css

搜索  a.curSelectedNode  关键字,修改下面两行即可,这个可根据个人需求来

react中使用ztree,对ztree样式进行修改,ztree样式风格antd化

至于文字大小样式等可以使用fontCss属性

react中使用ztree,对ztree样式进行修改,ztree样式风格antd化

修改后样式

react中使用ztree,对ztree样式进行修改,ztree样式风格antd化

右上角点个赞,谢谢