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函数ajax
Aug 20 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
JS实现购物车特效
Feb 02 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
You might like
PHP脚本的10个技巧(6)
2006/10/09 PHP
php 无限极分类
2008/03/27 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
php curl发送请求实例方法
2019/08/01 PHP
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
python中函数默认值使用注意点详解
2016/06/01 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
详解python中的线程与线程池
2019/05/10 Python
python中append实例用法总结
2019/07/30 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
Python 忽略文件名编码的方法
2020/08/01 Python
vscode调试django项目的方法
2020/08/06 Python
python 元组和列表的区别
2020/12/30 Python
JAVA程序员自荐书
2014/01/30 职场文书
绘画专业自荐信
2014/07/04 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
个人收入证明格式
2015/06/24 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
浅谈Python中的正则表达式
2021/06/28 Python
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
Python加密技术之RSA加密解密的实现
2022/04/08 Python