Ant Design Vue 中 Tree 组件复选框修改样式

一、问题

最近需要实现一个业务需求，要修改勾选框中的颜色，默认勾选框的颜色是蓝色，现在需要变成绿色。

1、官网示例：

2、业务需求：

3、具体实现：

HTML 部分代码

<template><div class="select-check-main"><div class="select-main"><sz-treev-model:checkedKeys="checkedKeys"v-model:expandedKeys="expandedKeys":defaultExpandAll="true":tree-data="treeData"@check="check"/></div></div>
</template>

 CSS部分代码

<style scoped lang="less">.select-check-main {width: 100%;padding: 0 10px;color: #fff;::v-deep .ant-tree {font-size: 16px;}// 选中和半选中时的复选框样式::v-deep .ant-tree-checkbox-checked .ant-tree-checkbox-inner,::v-deep .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner {background-color: #1BBA79 !important; /* 选中时的背景颜色 */border-color: #1BBA79 !important; /* 选中时的边框颜色 */&::after {background-color: #1BBA79 !important; /* 内部斜杠的颜色 */}}// 正常状态和hover状态的复选框样式::v-deep .ant-tree-checkbox .ant-tree-checkbox-inner {border-color: #1BBA79 !important; /* 默认边框颜色 */&:hover {border-color: #1BBA79 !important; /* hover时的边框颜色 */}}}
</style>