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弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
canvas的神奇用法
Feb 03 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
You might like
php获得当前的脚本网址
2007/12/10 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
Python 串口读写的实现方法
2019/06/12 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
详解django中Template语言
2020/02/22 Python
python程序如何进行保存
2020/07/03 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
应聘医学检验人员自荐信
2013/09/27 职场文书
施工员岗位职责
2014/03/16 职场文书
体育课课后反思
2014/04/24 职场文书
村安全生产责任书
2014/08/25 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
小班上学期个人总结
2015/02/12 职场文书
给朋友的道歉短信
2015/05/12 职场文书
人与自然的观后感
2015/06/18 职场文书
网络研修心得体会
2016/01/08 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫