需求描述:
antd默认树选择器下拉菜单中的勾选框为蓝色,如下图。需要改成系统主题色橙色,如下图。
//dropdownClassName="selectClass" :getPopupContainer="triggerNode => triggerNode.parentNode" 以上2个属性帮助选中树选择器的下拉框
<a-tree-select v-model:value="formData.purchaseMainProduct"
size="small"
class="inputStyle"
dropdownClassName="selectClass"
:getPopupContainer="triggerNode => triggerNode.parentNode"
:maxTagCount="12"
:treeCheckable="true"
:treeCheckStrictly="false"
max-tag-count="responsive"
:show-checked-strategy="treeSelectShow"
:tree-data="cagData"
allow-clear placeholder="选择主需产品"
@change="handleCateChange"
/>
//css样式
:deep(.selectClass){
.ant-select-tree-checkbox-checked {
.ant-select-tree-checkbox-inner {
background-color: #e25234 !important;
border-color: #e25234;
}
}
.ant-select-tree-checkbox-indeterminate {
.ant-select-tree-checkbox-inner {
// background-color: red !important;
// border-color: red;
&::after {
background-color: #e25234 !important;
}
}
}
.ant-select-tree-checkbox {
.ant-select-tree-checkbox-checked {
&:hover {
border-color: #e25234 !important;
}
}
.ant-select-tree-checkbox-inner {
&:hover {
border-color: #e25234 !important;
}
}
}
}