el修改后服务器维护,如何正确修改element组件样式

需求：

想要修改element时间选择器的样式，试过三种方法：

1、在style外面另写个style；

2、在组件上加个id或者class定位，然后用 .yourClass /deep/ .element组件样式 修改，会全局污染；

3、将要修改的样式在外面写个单独样式文件，在需要用到的页面引入。

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

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

页面组件：

v-model="dengyouTimeValue"

type="daterange"

@change="dengyouSelectTime"

unlink-panels

range-separator="至"

start-placeholder="开始日期"

end-placeholder="结束日期"

:picker-options="dengyou_pickerOptions"

>

样式定位：

/* 这里是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;

}

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

就是他妈的这么简单