修改element-ui中时间选择器的样式

一般项目中如果设置了scoped属性，可以通过>>>或者/deep/来修改其他第三方组件的样式。

但是elementUI的时间选择器el-date-picker是将元素直接挂载到页面的中，而非自身元素下，所以使用/deep/穿透也是无法定位到元素的。

两种思路：

一是查询elementUI的配置项文档，看看能不能将时间选择器挂载到其元素自身下面，而非中，这样就能通过>>>或者/deep/来修改其样式；

二同样是查询elementUI的配置项文档【官方文档很重要！】，看看是否能够其设置单独的样式，且不会影响项目中其他的时间选择器样式。

1.定义在自己的样式下进行修改，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属性，给其设置样式。

感谢lulululuq

原文链接：https://blog.csdn.net/weixin_44080648/article/details/109311076