企业管理平台系统,北京网站整站优化,绍兴网络推广公司,专业装饰企业展厅设计公司一般的使用组件库想要自定义样式都会使用深度选择器deep去实现 但是有的组件不管是deep还是!important还是写行内样式都改不掉 这里主要讲使用a-cascader联级选择器的浮层改变样式
一#xff0c;使用组件
a-cascader:optionsregionOptionschange-on-selectv…一般的使用组件库想要自定义样式都会使用深度选择器deep去实现 但是有的组件不管是deep还是!important还是写行内样式都改不掉 这里主要讲使用a-cascader联级选择器的浮层改变样式
一使用组件
a-cascader:optionsregionOptionschange-on-selectv-modelqueryParams.regionCodeallowClearplaceholder请选择stylewidth: 160px:field-names{label: title,value: id,children: children,}:display-renderdisplayRenderchangechangeVideoRegion/这是组件自带的浮层样式但我想使用的是灰色代替白底色因为我有自带的背景色且不是白色 二然后打开打印台找到控制样式的选择器
首先我的第一选择就是深度选择器然后发现打印台根本没有自己写的样式没生效 然后我就在深度选择器写的样式后面加了一个!important一样没生效
然后我就在组件中行内写一个classcustom-cascader然后再写样式还是没生效
然后我就在api找看有没有属性是修改样式的然后找到了可以自定义浮层的样式名称 然后直接在组件中写
a-cascader:optionsregionOptionschange-on-selectv-modelqueryParams.regionCodeallowClearplaceholder请选择stylewidth: 160px:field-names{label: title,value: id,children: children,}:display-renderdisplayRenderchangechangeVideoRegionpopupClassNamecustom-cascader-popup/然后我就在下面写样式但是依旧没有生效这就玄幻了明明在打印台已经看到组件有这个类名了啊后来一想应该是样式中加了scoped导致的然后重新写了style/style标签成功了
后来发现浮层不是跟随选择器的发现了这个api属性一起改了 还用深度选择器修改了选择框的样式
三下面是完整的修改顺便还改了滚动条的样式
组件部分
a-cascader:optionsregionOptionschange-on-selectv-modelqueryParams.regionCodeallowClearplaceholder请选择stylewidth: 160px:field-names{label: title,value: id,children: children,}:display-renderdisplayRenderchangechangeVideoRegion:getPopupContainer(triggerNode) triggerNode.parentNodepopupClassNamecustom-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);
}
/stylestyle scoped langless
.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
