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_06_理解对象的创建过程
Oct 15 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
You might like
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
许愿墙中用到的函数
2006/10/07 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
python3爬虫之设计签名小程序
2018/06/19 Python
python如何实现异步调用函数执行
2019/07/08 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
python Zmail模块简介与使用示例
2020/12/19 Python
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
大学系主任推荐信范文
2013/12/24 职场文书
写给女生的道歉信
2014/01/08 职场文书
工程师岗位职责规定
2014/02/26 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
公司前台接待岗位职责
2015/04/03 职场文书