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的图片懒加载js
Jun 30 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
Element PageHeader页头的使用方法
Jul 26 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
77A一级收信机修理记
2021/03/02 无线电
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
PHP7多线程搭建教程
2017/04/21 PHP
php多进程应用场景实例详解
2019/07/22 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
Python实现拼接多张图片的方法
2014/12/01 Python
Python重新加载模块的实现方法
2018/10/16 Python
Django之模型层多表操作的实现
2019/01/08 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
运动会邀请函范文
2014/02/06 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
党的群众路线调研报告
2014/11/03 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL