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 相关文章推荐
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
You might like
Session的工作方式
2006/10/09 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php 魔术函数使用说明
2010/02/21 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
浅谈Vue数据响应
2018/11/05 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python科学计算之Pandas详解
2017/01/15 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
大学生求职自荐信
2013/12/12 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python