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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
You might like
dedecms模版制作使用方法
2007/04/03 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
PHP运行模式汇总
2016/11/06 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python中用Decorator来简化元编程的教程
2015/04/13 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
Python创建或生成列表的操作方法
2019/06/19 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
python实现梯度法 python最速下降法
2020/03/24 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
应届生妇产科护士求职信
2013/10/27 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android