ant design vue选择框背景色更改

需求        

        因为要实现网页白天模式和夜间模式的切换,那相应文字和组件颜色也要适配对应的主题,而a-select默认的白色背景色在夜间模式下非常突兀,故我们要修改选择框和选项列表框的颜色。

效果

        白天模式

ant design vue选择框背景色更改_第1张图片

        夜间模式

ant design vue选择框背景色更改_第2张图片

实现

        先介绍下背景,本次使用的是vue3框架,另外关于下面代码中的getPopupContainer这个API,是因为a-select默认相对于body定位的,故我们点开选项列表后滑动页面,选项列表会相对视口固定,即与选项框分离,使用getPopupContainer将a-select绑定到他的父节点上,这样就解决了两者分离问题:

	
				
			

        修改a-select的样式,我们需要进行样式穿透,按需求我们要修改选项框字体、背景、下拉箭头颜色,选项列表字体、背景颜色,选中后的选项颜色与悬停时选项颜色:

实现效果

ant design vue选择框背景色更改_第3张图片

你可能感兴趣的:(前端,前端,vue.js,css,anti-design-vue,scss)