一般的使用组件库想要自定义样式都会使用深度选择器deep去实现
但是有的组件不管是deep还是!important还是写行内样式都改不掉
这里主要讲使用a-cascader联级选择器的浮层改变样式
一，使用组件
<a-cascader:options="regionOptions"change-on-selectv-model="queryParams.regionCode"allowClearplaceholder="请选择"style="width: 160px":field-names="{label: 'title',value: 'id',children: 'children',}":display-render="displayRender"@change="changeVideoRegion"/>
这是组件自带的浮层样式，但我想使用的是灰色代替白底色，因为我有自带的背景色且不是白色
二，然后打开打印台找到控制样式的选择器
首先我的第一选择就是深度选择器，然后发现打印台根本没有自己写的样式，没生效
然后我就在深度选择器写的样式后面加了一个!important，一样没生效
然后我就在组件中行内写一个class="custom-cascader"然后再写样式，还是没生效
然后我就在api找看有没有属性是修改样式的，然后找到了可以自定义浮层的样式名称
然后直接在组件中写
<a-cascader:options="regionOptions"change-on-selectv-model="queryParams.regionCode"allowClearplaceholder="请选择"style="width: 160px":field-names="{label: 'title',value: 'id',children: 'children',}":display-render="displayRender"@change="changeVideoRegion"popupClassName="custom-cascader-popup"/>
然后我就在下面写样式，但是！！依旧没有生效，这就玄幻了，明明在打印台已经看到组件有这个类名了啊，后来一想应该是样式中加了scoped导致的，然后重新写了<style></style>标签，成功了！！！
后来发现浮层不是跟随选择器的发现了这个api属性，一起改了
还用深度选择器修改了选择框的样式
三，下面是完整的修改，顺便还改了滚动条的样式
组件部分
<a-cascader:options="regionOptions"change-on-selectv-model="queryParams.regionCode"allowClearplaceholder="请选择"style="width: 160px":field-names="{label: 'title',value: 'id',children: 'children',}":display-render="displayRender"@change="changeVideoRegion":getPopupContainer="(triggerNode) => triggerNode.parentNode"popupClassName="custom-cascader-popup"/>
样式部分
<style>
.custom-cascader-popup {background: #222222;color: rgba(255, 255, 255, 0.65);
}.custom-cascader-popup .ant-cascader-menu-item-expand-icon {color: rgba(255, 255, 255, 0.65);
}.custom-cascader-popup.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled),
.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled):hover {color: #009fe8;background: transparent;
}.custom-cascader-popup .ant-cascader-menu-item:hover {background: transparent;
}.custom-cascader-popup .ant-cascader-menu::-webkit-scrollbar {/*滚动条整体样式*/width: 1px;
}.custom-cascader-popup .ant-cascader-menu::-webkit-scrollbar-thumb {/*滚动条里面小方块*/background: rgba(255, 255, 255, 0.4);
}.custom-cascader-popup .ant-cascader-menu::-webkit-scrollbar-track {/*滚动条里面轨道*/background: rgba(255, 255, 255, 0.15);
}
</style>
<style scoped lang="less">
.enlarge-and-video {position: fixed;left: 0;right: 0;bottom: 0;top: 0;z-index: 999;background-color: #000000;.enlarge-space {width: 100%;height: calc(~"100vh - 63px");:deep(.ant-form-item-label > label) {color: rgba(255, 255, 255, 0.85);}:deep(.ant-cascader-picker) {background-color: transparent;}:deep(.ant-cascader-input.ant-input) {border: 1px solid rgba(255, 255, 255, 0.2);}:deep(.ant-cascader-picker-arrow) {color: rgba(255, 255, 255, 0.25);}:deep(.ant-cascader-picker-clear) {color: rgba(256, 256, 256, 0.85);background: transparent;}:deep(.ant-cascader-picker-label) {color: rgba(255, 255, 255, 0.65);}}
}
</style>
)
