修改DateTimePicker默认样式

超级小可爱

发布于 2024-02-28 08:53:28

1350

发布于 2024-02-28 08:53:28

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

<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);
     }
   }