Vue中使用element-UI的el-date-picker-修改弹出窗样式_el-datepicker样式修改vue

使用

<el-date-picker
  size="mini"
  class="time-picker"
  popper-class="picker-popper"
  value-format="timestamp"
  v-model="mtimeValue[1]"
  type="date"
  :editable="false"
  placeholder="YYYY-MM-DD"
  @change="onConfirmM"
></el-date-picker>

popper-class="picker-popper"

因为el的时间选择器弹出窗是挂载在body中的，并不是在元素下面挂载，所以需要使用提供的popper-class去选择修改样式

样式

原样式                                                              修改后

css样式

<style lang="less">
.picker-popper {
  background: #000000;
  &.el-picker-panel,
  &.el-time-panel {
    border: #494949 1px solid;
  }
  &.el-popper[x-placement^="bottom"] .popper__arrow::after {
    border-bottom-color: #000000;
  }
  .el-picker-panel__icon-btn {
    color: #ffffff;
  }
  .el-date-table td.next-month,
  .el-date-table td.prev-month {
    color: #606266;
  }
  &.el-picker-panel {
    color: #c0c4cc;
  }
}
</style>