elementplus 中 DatePicker 日期选择器样式修改无效

问题

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

原因

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

解决

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

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

html 复制代码
<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>
相关推荐
树上有只程序猿34 分钟前
终于有人把数据库讲明白了
前端
猩兵哥哥40 分钟前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸41 分钟前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin43 分钟前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊1 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆1 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术1 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
江城开朗的豌豆1 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙1 小时前
GIT 配置别名&脚本自动化执行
前端·git