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 相关文章推荐
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
Js面试算法详解
Apr 08 Javascript
深入解析ES6中的promise
Nov 08 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 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/06 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
php生成与读取excel文件
2016/10/14 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
jquery操作select大全
2014/04/25 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
JSON取值前判断
2014/12/23 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
python连接MySQL数据库实例分析
2015/05/12 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
校园餐饮创业计划书
2014/01/10 职场文书
节能减排倡议书
2014/04/15 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
社区活动总结范文
2015/05/07 职场文书
7个关于Python的经典基础案例
2021/11/07 Python