修改DateTimePicker默认样式

Mary&Dorr

于 2022-06-13 10:49:50 发布

阅读量2.3k

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_61404523/article/details/125255710

版权

这篇博客主要介绍了如何调整Element UI中日期选择器（el-date-picker）的默认背景颜色，以适应深色项目背景。作者通过CSS样式设置，特别是使用了`::v-deep`选择器来修改`.el-range-input`的背景颜色，实现了组件内部分元素的颜色定制，使其与整体风格保持一致。

摘要由CSDN通过智能技术生成

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

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