element ui/plus 如何更改组件的样式

 日期范围选取标签，字体太大显示不完全，但是又不想调整宽度。

      <el-form-item label="生产日期" style="width: 303px;">
        <el-date-picker class="date-picker"
          v-model="daterangeProductDate"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

在el-date-picker标签中增加class="date-picker" ，这样的好处是下面写的自定义样式不会影响其他页面，注意date-picker要具有唯一性。

<style>
  .date-picker{
    .el-range-input {
    font-size: 13px !important;
  }
}
</style>

页面中加入以上样式，el-range-input是element对input标签定义的类名，可以在浏览器F12，检查元素看到。

可以看到字体已经变小，并且其他页面用到的element组件样式也不会被影响