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 相关文章推荐
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
vue项目中axios使用详解
Feb 07 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
You might like
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
解读Python中degrees()方法的使用
2015/05/18 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
几个数据库方面的面试题
2016/07/01 面试题
电子商务专员岗位职责
2013/12/11 职场文书
教师节促销活动方案
2014/02/14 职场文书
《赶海》教学反思
2014/04/20 职场文书
师德师风个人反思
2014/04/28 职场文书
大学新闻系求职信
2014/06/03 职场文书
90条交通安全宣传标语
2019/10/12 职场文书