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

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

<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>
// 这里需要注意的是：不要在<style>里面写 scoped
<style lang="scss" >
// 这里是下拉框的样式，需要修改什么样式，就直接通过浏览器查看你要改的样式，然后就改就行
.popperClass {//图标样式.el-icon {color: #fff;}//头部样式.el-date-picker__header-label {color: #fff;font-size: 18px;}// 星期样式.el-date-table th {color: #fff;}// 时间选择器层样式.el-picker-panel {z-index: 2007;color: #fff;background: rgba(30, 84, 128, 0.8);border: 1px solid rgba(29, 128, 218, 1);}
}
// 输入框的样式在这里改就行
.time-box {.el-input__wrapper {background-color: transparent;border-radius: 0px;box-shadow: none;// width: 50px;}.el-input__inner {color: #ffffff;}.el-date-editor.el-input,.el-date-editor.el-input__wrapper {width: 120px;}.el-input__wrapper:hover {box-shadow: none;}.el-input {--el-input-focus-border-color: transparent;--el-input-border: none;}.el-popper.is-light {background: #255783;border: 1px solid #106c94;}
}
// 弹出框popper层样式
.el-picker__popper.el-popper {background: rgba(30, 84, 128, 0.8);border: 1px solid rgba(29, 128, 218, 1);box-shadow: rgba(30, 84, 128, 0.8);
}
// 弹出框外部尖三角样式
.el-popper.is-light .el-popper__arrow::before {border: 1px solid rgba(29, 128, 218, 1);background: rgba(29, 128, 218, 1);
}
</style>

最后的效果图：