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>
相关推荐
祝余呀几秒前
HTML初学者第三天
前端·html
就爱瞎逛17 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81620 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者34 分钟前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字3 小时前
Kotlin lazy 委托的底层实现原理
前端