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

Question

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

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