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>
相关推荐
江号软件分享21 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6739 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js