Due to business needs, the style of the component taken directly from element plus did not match the overall style, so the style had to be modified. Direct deep modification did not take effect at all. Finally, it was discovered that the el-date-picker component has a popper-class attribute. Through this attribute We can modify the style of the drop-down box. Just put the code below. I hope it can help you.
<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>
The final rendering:
