ant design vue选择框背景色更改

需求        

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

效果

        白天模式

        夜间模式

实现

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

	<a-select ref="select" v-model:value="optionValue" class="select" :class="props.myClass"
				:getPopupContainer="triggerNode => { return triggerNode.parentNode }">
				<template v-for="(item, index) in props.options" :key="index">
					<a-select-option :value="item.value">{{ item.name }}</a-select-option>
				</template>
			</a-select>

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

<style scoped lang='scss'>
.select {
		position: absolute;
		top: 0;
		right: 16px;
		width: 98px;
		height: 24px;
		font-size: 14px;

		&.moon {
			color: #fff;

			:deep() {
				.ant-select-arrow {
					color: #fff;
				}

				.ant-select-selector {
					height: 24px;
					border-radius: 4px;
					background-color: transparent;
				}

				.ant-select-dropdown {
					background-color: transparent;

					.ant-select-item {
						color: #fff;

						&:hover {
							background-color: #4a4a4a;
						}
					}

					.ant-select-item-option-active {
						background-color: #3a3a3a;
					}

					.ant-select-item-option-selected {
						background-color: #3a3a3a;
					}
				}
			}
		}
	}
</style>

实现效果