需求：

想要修改element时间选择器的样式，试过三种方法：
1、在style外面另写个style；
2、在组件上加个id或者class定位，然后用 .yourClass /deep/ .element组件样式 修改，会全局污染；
3、将要修改的样式在外面写个单独样式文件，在需要用到的页面引入。

以上三种方法均会引起全局样式污染的问题，正确方法如下：

采用定位组件的方法，通过组件外层的class或id定位，使用 >>> 进行样式穿透。
页面组件：

<div class="dateRange">
            <el-date-picker
              v-model="dengyouTimeValue"
              type="daterange"
              @change="dengyouSelectTime"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="dengyou_pickerOptions"
            ></el-date-picker>
</div>

样式定位：

<style scoped>
/* 这里是element时间选择器的公共样式 */

.dateRange >>> .el-date-table td {
  padding: 0;
}

.dateRange >>> .el-date-range-picker__content {
  padding: 10px;
}

.dateRange >>> .el-date-table th {
  font-size: 12px;
  padding: 0;
}

.dateRange >>> .el-date-range-picker__header div {
  font-size: 14px;
}

.dateRange >>> .el-date-editor .el-range-input {
  width: 70px;
  color: #f0f8ff;
  background: #01131b;
}
</style>

其中，dateRange 是组件外层的div的class。

就是他妈的这么简单