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 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
You might like
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
基于header的一些常用指令详解
2013/06/06 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
详解JavaScript的变量
2019/04/04 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
水果连锁超市创业计划书
2014/01/24 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
文明之星事迹材料
2014/05/09 职场文书
工作检讨书范文
2015/01/23 职场文书
支教个人总结
2015/03/04 职场文书
高一地理教学工作总结
2015/08/12 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS