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实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
Node.js编码规范
Jul 14 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
You might like
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
Python 开发Activex组件方法
2009/11/08 Python
Python Trie树实现字典排序
2014/03/28 Python
Python import用法以及与from...import的区别
2015/05/28 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
django反向解析和正向解析的方式
2018/06/05 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
python numpy 反转 reverse示例
2019/12/04 Python
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
酒后驾驶检讨书
2014/01/27 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
自荐书范文范例
2014/02/13 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
生产文员岗位职责
2014/04/05 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
开学典礼致辞
2015/07/29 职场文书
golang中的并发和并行
2021/05/08 Golang
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js
Python办公自动化解决world文件批量转换
2021/09/15 Python
python实现双向链表原理
2022/05/25 Python