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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
jquery实现下载图片功能
Jul 18 jQuery
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
You might like
提问的智慧
2006/10/09 PHP
PHP中的Memcache详解
2014/04/05 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
Python中使用logging模块打印log日志详解
2015/04/05 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
党员承诺书怎么写
2014/05/20 职场文书
公司租房协议书范本
2014/10/08 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
英语教师个人工作总结
2015/02/09 职场文书
高中教师个人工作总结
2015/02/10 职场文书
小学新课改心得体会
2016/01/22 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
python中if和elif的区别介绍
2021/11/07 Python