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 相关文章推荐
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
js格式化时间小结
Nov 03 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
详解如何使用Node.js实现热重载页面
May 06 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
You might like
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
js实现的切换面板实例代码
2013/06/17 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
Django 解决由save方法引发的错误
2020/05/21 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
应用化学专业本科生求职信
2013/09/29 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
报告会主持词
2014/04/02 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
标准单位租车协议书
2014/09/23 职场文书
2014年应急工作总结
2014/12/11 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
MySQL七种JOIN类型小结
2021/10/24 MySQL
解决 redis 无法远程连接
2022/05/15 Redis
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL