elementui的el-popover修改样式不生效的解决


Posted in Javascript onJune 30, 2021

在使用element-ui的时候,有一个常用的组件,那就是el-popover,但是element-ui官方文档中样式跟用法都比较局限,在使用时都需要改动样式

项目中使用了el-popover,但是想修改一下样式,一直不成功,先来看一下官方文档怎么说的

elementui的el-popover修改样式不生效的解决

添加一个类名,string类型,ok,添加一个

<el-popover
    placement="right"
    width="400"
    trigger="hover"
    popper-class="my-popover"
    >

去设置样式

<style lang="scss" scoped>
	.my-popover{
		padding:20px;
	}
</style>

elementui的el-popover修改样式不生效的解决

结果就是没有设置成功!
是不是因为scoped,不加scoped再试一下!

<style>
my-popover{
    padding:10px 30px;
}
</style>

elementui的el-popover修改样式不生效的解决

还是没有效果!!!
经过疯狂试验以及网上搜索!
最终写法是这样,.el-popover.my-popover 这种格式,前缀是.el-popover ,不然不生效。且不能加上scoped

<style>
.el-popover.my-popover{
    padding:10px 30px;
}
</style>

elementui的el-popover修改样式不生效的解决

修改成功!

到此这篇关于elementui的el-popover修改样式不生效的解决的文章就介绍到这了,更多相关el-popover 样式不生效内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
js实现五星评价功能
Mar 08 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
老生常谈jacascript DOM节点获取
Apr 17 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
You might like
非常好的php目录导航文件代码
2006/10/09 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
python 实现两个线程交替执行
2020/05/02 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
平安建设实施方案
2014/03/19 职场文书
教师对学生的寄语
2014/04/03 职场文书
门卫岗位职责
2015/02/09 职场文书
校长一岗双责责任书
2015/05/09 职场文书
无罪辩护词范文
2015/05/21 职场文书
2015年测量员工作总结
2015/05/23 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
vue实现列表垂直无缝滚动
2022/04/08 Vue.js