一般项目中如果设置了scoped属性，可以通过>>>或者/deep/来修改其他第三方组件的样式。
但是elementUI的时间选择器el-date-picker是将元素直接挂载到页面的<body>中，而非自身元素下，所以使用/deep/穿透也是无法定位到元素的。
两种思路：
一是查询elementUI的配置项文档，看看能不能将时间选择器挂载到其元素自身下面，而非<body>中，这样就能通过>>>或者/deep/来修改其样式；
二同样是查询elementUI的配置项文档【官方文档很重要！】，看看是否能够其设置单独的样式，且不会影响项目中其他的时间选择器样式。
1.定义在自己的样式下进行修改，<stylelang="scss"scoped>，加上scoped之后就只在自己的页面生效，不影响其他人的样式。
2.如果很难改的动，放在自己页面中怎么都不生效的那种，而且是大家都用的这种就可以定义一个less文件，在main.js中引入，然后直接在自己的页面绑定定义的样式即可。
首先，定义date.less文件。
.mydatestyle{border: none !important;.el-picker-panel__body-wrapper{background: url(./img_wb/date.png) no-repeat;background-size: 100% 100%;}.el-picker-panel__sidebar{border: none;background: none !important;}.el-date-range-picker__header{color: white;}.el-date-range-picker__content.is-left{border-right: none;}.el-picker-panel__content .el-date-range-picker__.content .is-right{border: none;background: none !important;}.el-date-table td.next-month, .el-date-table td.prev-month{color: aliceblue;}.el-date-table td span{color: white;}.el-date-table th{color: white;border-bottom: none;}.el-picker-panel__icon-btn{color: white;}.el-picker-panel__shortcut{color: white;}.el-date-table td.in-range div{background-color: #223a5f;}}
然后，在main.js中引入。
import"./assets/date.less";
然后，项目中使用，利用时间选择器的popper-class属性，给其设置样式。
<el-date-pickerpopper-class="mydatestyle"v-model="timeValue"type="daterange"align="right"unlink-panelsvalue-format="yyyy-MM-dd"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerOptions"></el-date-picker>
感谢lulululuq
原文链接：/weixin_44080648/article/details/109311076
