修改DateTimePicker默认样式

默认样式 由于我的项目背景颜色比较深 白色显得格格不入 修改默认背景颜色

<el-date-picker
         class="picker"
         v-model="value1"
         type="datetimerange"
         range-separator="至"
         start-placeholder="开始日期"
         end-placeholder="结束日期"
       >
 </el-date-picker>

如果只写下面的代码

.picker {
     height: 40px;
     background-color: rgba(17, 15, 153, 0.1);
     // ::v-deep .el-range-input {
     //   background-color: rgba(17, 15, 153, 0.1);
     // }
   }

 

效果是这样的

 

下面的 .el-range-input就是中间这部分 使用 ::v-deep

.picker {
     height: 40px;
     background-color: rgba(17, 15, 153, 0.1);
     ::v-deep .el-range-input {
       background-color: rgba(17, 15, 153, 0.1);
     }
   }

 

 

THE END