vue中的自定义主题datepicker element-ui答案

【问题标题】：Custom theme datepicker element-ui in vuevue中的自定义主题datepicker element-ui
【发布时间】：2019-11-12 06:39:58
【问题描述】：

我有一个用户可以选择 date_range 的网站，所以我使用 datepicker element-ui。但是 datepicker 默认主题，我如何在 vue 中更改它。

【问题讨论】：

标签： css vue-cli-3 element-ui

【解决方案1】：

目前Element-UI不提供高度自定义主题的功能，只提供简单的自定义大小和颜色。

但是，您可以使用以下配置自定义样式：

popper-class - DatePicker 下拉列表的自定义类名

picker-options - 您可以通过使用 cellClassName 属性创建 picker-options 对象来设置自定义类名。

您可以使用自定义类覆盖默认样式。

例子：

// template
<el-date-picker v-model="value1"
                type="date"
                popper-class="custom-date-picker"
                placeholder="Pick a day">
</el-date-picker>

// css
.custom-date-picker{
  .el-date-picker__header{
    // custom header style here
  }
}

【讨论】：

我试过了，但是不行。

.custom-datepicker { .el-picker-panel__body-wrapper{ .el-picker-panel__body{ background-color: #54657e;颜色：#eceff4； } } }
我试过了，但是不行。 <div class="wrap-date-picker"> <date-picker v-model="daterange_filter" type="daterange" popper-class="custom-datepicker" range-separator="To" start-placeholder="Start date" end-placeholder="End date" > </date-picker> </div>.custom-datepicker { .el-picker-panel__body-wrapper{ .el-picker-panel__body{ background-color: #54657e; color: #eceff4; } } }
@user8489678 你使用 sass 还是更少？
我在自己的风格中使用 scss
试试.custom-datepicker { /deep/ .el-picker-panel__body-wrapper{ .el-picker-panel__body{ background-color: #54657e; color: #eceff4; } } }

【解决方案2】：

这对我有用，Element Plus 和 Vue 3!
在 App.vue 中

<style lang="scss">
 .el-date-editor {
   --el-date-editor-width: 40% !important;
 }
</style>

【讨论】：