问题

遇到一个需求需要修改 DatePicker 日期选择器的样式，在添加了 scoped 属性的 style 标签，并且使用了 deep 样式穿透的情况下并不能修改其样式。

原因

DatePicker 日期选择器弹出面板默认挂载在 body 上，所以在组件中添加了 scoped 属性的 style 标签下是修改不到其样式的。

解决

官网中提供了一个给弹出面板设置 class 类名的属性——popper-class，通过该属性添加类名后选择该类名来修改样式即可。

需要注意的是，虽然官网提供了该属性，但是我们通过属性来修改样式的时候也并不能改变弹出面板是挂载在 body 的事实，所以我们要修改其样式的话需要把 scoped 属性去掉才行，我们可以添加一个新的不带 scoped 属性的 style 标签来对其样式进行修改。代码如下：

<template>
  <el-date-picker
     v-model="time"  
     type="datetime"
     placeholder="请选择时间"
     popper-class="date-cell">
  </el-date-picker>
</template>

<style scoped lang="scss">
	...//组件内部样式
</style>

<style lang="scss"> //去掉 scoped 属性
	...//时间选择器样式
</style>