关于el-date-picker组件修改输入框以及下拉框的样式

因为业务需求,从element plus直接拿过来的组件样式和整体风格不搭,所以要修改样式,直接deep修改根本不生效,最后才发现el-date-picker组件有一个popper-class属性,通过这个属性我们就能够修改下拉框的样式,下面就直接放代码吧,希望能帮到你噢。

关于el-date-picker组件修改输入框以及下拉框的样式_第1张图片

<template>
// 如果需要修改输入框的样式,最好在el-date-picker外套一个div,样式就在这个div下写,
// 避免污染全局的样式
  <div class="time-box"> 
    <el-date-picker 
	    v-model="time" 
	    type="date" 
	    prefix-icon="CaretBottom"  // 组件的前置图标可以通过这个属性修改
	    placeholder="请选择时间"
     	popper-class="popperClass"  // 下拉框的样式通过该属性修改
      />
  </div>
</template>

<script setup name="TimeSelect">
import { onBeforeUnmount, provide, reactive, readonly, ref } from "vue";

const time = ref(null);

</script>
// 这里需要注意的是:不要在