Acerca del componente el-date-picker para modificar el estilo del cuadro de entrada y el cuadro desplegable

Debido a las necesidades comerciales, el estilo del componente tomado directamente del elemento plus no coincidía con el estilo general, por lo que fue necesario modificar el estilo. La modificación profunda directa no tuvo ningún efecto. Finalmente, se descubrió que el-date El componente -picker tiene un atributo popper-class. A través de este atributo podemos modificar el estilo del cuadro desplegable. Simplemente coloque el código a continuación. Espero que pueda ayudarlo.

<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>

La representación final: