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 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
You might like
php print EOF实现方法
2009/05/21 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
JS定时器实例
2013/04/17 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
python exit出错原因整理
2020/08/31 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
法律专业应届本科毕业生求职信
2013/10/25 职场文书
校园新闻广播稿
2014/01/10 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
办公室务虚会发言材料
2014/10/20 职场文书