antd树组件tree当中想要动态的修改展开和收起的Icon图标

方案1

使用CSS修改方案一
/* 任意图标的改法树组件  使用这个样式的前提是要把showLine={false}showLine设置为false*/
/* .ant-tree-switcher_close{//这个是收起的背景图设置
    width: 24px;
    height: 24px;
    background: url('./图标1.png') no-repeat;
    background-size: 100% 100%;
} 
.ant-tree-switcher_open{//这个是展开的背景图设置
    width: 24px;
    height: 24px;
    background: url('./图标2.png') no-repeat;
    background-size: 100% 100%;
} 

.anticon.anticon-caret-down.ant-tree-switcher-icon{//把三角形隐藏直接透明度设置为1
    opacity: 0;
} */

方案2

/* 如下这段样式也可以改但是注意要把showLine={true}属性设置为true */
/* span.ant-tree-indent-unit::before {
    position: absolute;
    top: 0;
    right: 12px;
    bottom: -4px;
    border-right: 0px !important
}
span.ant-tree-node-selected {
    border: 2px solid pink;
    border-radius: 5px;
    height: 24px;
    
}
.ant-tree .ant-tree-node-content-wrapper:hover {
    background-color: white;
}
.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}
.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected span{
    width: 100%;
    height: 28px;
    display: inline-block;
    line-height: 28px;
}
.ant-tree-title div{
    position: relative;
}
.ant-tree-title{
    line-height: 20px;
}  */

你可能感兴趣的:(react,css,javascript)