前言

最近在工作中用到了element-ui的el-date-picker日期时间选择器。修改样式的时候，属实花了一些时间。因为el-date-picker是挂在body下的，使用/deep/改不掉。

所以把我用过的两个解决方案总结出来分享给大家。如果大家有更好的解决方案欢迎在评论区留言，谢谢！

方案1：popper-class

使用时间日期选择器的popper-class属性，给其设置样式。

这个属性是官方给出的，细心的同学尝试一下，就可以解决修改el-date-picker样式的问题了。

如图，我们就成功给时间日期选择器添加了一个className，设置其样式的时候注意一下css层级关系即可。

示例代码：

 <el-date-picker
      v-model="valueTime"
       type="datetime"
       placeholder="选择日期时间"
       popper-class="date-picker">
  </el-date-picker>

方案2：修改全局的样式

修改全局的样式虽然不是很好，但一般风格统一的系统，大概率不会给时间日期选择器设置多套样式。

所以既然所有的时间日期选择器样式都一样，那在全局统一设置也未尝不可。

注意：虽然vue支持同一个组件存在多个<style>标签，但是像这种影响全局的还有不要放在单个组件下了，最好还是单独放在一个文件引入比较好，不然万一后期要维护可就得骂娘了。

结语

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！