返回顶部
首页 > 资讯 > 前端开发 > JavaScript >elementui的el-popover修改样式不生效的解决
  • 936
分享到

elementui的el-popover修改样式不生效的解决

2024-04-02 19:04:59 936人浏览 独家记忆
摘要

在使用element-ui的时候,有一个常用的组件,那就是el-popover,但是element-ui官方文档中样式跟用法都比较局限,在使用时都需要改动样式 项目中使用了el-po

在使用element-ui的时候,有一个常用的组件,那就是el-popover,但是element-ui官方文档中样式跟用法都比较局限,在使用时都需要改动样式

项目中使用了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>

在这里插入图片描述

结果就是没有设置成功!
是不是因为scoped,不加scoped再试一下!


<style>
my-popover{
    padding:10px 30px;
}
</style>

在这里插入图片描述

还是没有效果!!!
经过疯狂试验以及网上搜索!
最终写法是这样,.el-popover.my-popover 这种格式,前缀是.el-popover ,不然不生效。且不能加上scoped


<style>
.el-popover.my-popover{
    padding:10px 30px;
}
</style>

在这里插入图片描述

修改成功!

到此这篇关于elementui的el-popover修改样式不生效的解决的文章就介绍到这了,更多相关el-popover 样式不生效内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网! 

--结束END--

本文标题: elementui的el-popover修改样式不生效的解决

本文链接: https://lsjlt.com/news/129552.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • elementui的el-popover修改样式不生效的解决
    在使用element-ui的时候,有一个常用的组件,那就是el-popover,但是element-ui官方文档中样式跟用法都比较局限,在使用时都需要改动样式 项目中使用了el-po...
    99+
    2024-04-02
  • elementui的el-popover修改样式不生效的解决方法
    本篇内容介绍了“elementui的el-popover修改样式不生效的解决方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在使用elem...
    99+
    2023-06-20
  • elementui的el-input-number修改数值失效的问题及解决
    目录element ui的el-input-number修改数值失效问题代码解决办法分析说明官方资料最新说明el-input-number组件无法修改默认值为空element ui的...
    99+
    2024-04-02
  • vue使用elementui的el-date-picker设置样式无效如何解决
    今天小编给大家分享一下vue使用elementui的el-date-picker设置样式无效如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面...
    99+
    2023-07-05
  • elementUI样式修改未生效问题详解(挂载到了body标签上)
    目录前言一、适用范围二、示例1.目标2.实现思路总结前言 在使用element-ui库的时候,有时会需要修改它自带的css样式,组件模块化化编程时一般会用到/deep/方法进行样式穿...
    99+
    2023-05-14
    elementui样式修改 elementui样式未生效
  • css样式不生效如何解决
    1. 检查样式表的路径是否正确:请确保样式表文件的路径是正确的,可以使用相对路径或绝对路径。2. 检查样式表是否被正确引用:请确保在...
    99+
    2023-05-25
    css样式不生效 css
  • css样式不生效怎么解决
    当 css 样式不生效时,应从以下几个方面排查:确认样式表的链接是否正确。检查是否有其他 css 规则覆盖了您要应用的样式。确保您用于选择元素的 css 选择器是正确的。检查 html ...
    99+
    2024-05-21
    css
  • 外部css样式不生效的解决方法
    这篇文章给大家分享的是有关外部css样式不生效的解决方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 解决方法:1、将css引入的link的属性补充...
    99+
    2024-04-02
  • MySQL sql_mode修改不生效的原因及解决
    前言 近期多次聊到sql_mode的话题,也是多次遇到相关问题,今天就趁热打铁,再给大家带来一个sql_mode的案例分享。 场景模拟 基于业务敏感性的考虑,下面涉及的表、存储过程等均非真实数据,但并不影响排查过...
    99+
    2022-05-25
    MySQL sql_mode MySQL sql_mode修改不生效
  • 解决redis修改requirepass后不生效的问题
    刚刚接触redis,因为操作redis的时候不需要安全验证,所以想加上安全验证,在redis.windows.conf(redis目录下的配置文件)中加上 requirepass admin,可是重启服务 ...
    99+
    2024-04-02
  • tomcat修改server不生效如何解决
    如果修改了Tomcat的server.xml文件,但修改不生效,可能是由于以下原因:1. 未重启Tomcat:在修改server.x...
    99+
    2023-09-23
    tomcat
  • 关于react+antd样式不生效问题的解决方式
    目录1、添加antd组件样式不生效2、运行yarn eject时暴露配置文件报错3、less-loader版本过高,删除旧版本,下载低版本即可4、项目中引入icon代码报错补充:Re...
    99+
    2024-04-02
  • Element UI/Plus中全局修改el-table默认样式的解决方案
    目录起因解决方案在Vue2中在Vue3中总结起因 首先,Element 官网的表格样式默认是这样的: el-table 无边框el-table-column 行...
    99+
    2023-02-18
    elementui  el-table默认样式 element ui  el-table样式
  • qt界面修改不生效如何解决
    如果在修改Qt界面后发现修改不生效,可能有以下几个原因和解决办法: 编译错误:修改界面后,重新编译项目,确保没有编译错误导致界面...
    99+
    2023-10-23
    qt
  • linux修改完ip不生效怎么解决
    如果在Linux上修改完IP地址后没有生效,可能有几个原因:1. 网络服务没有重启:在修改完IP地址后,需要重启网络服务才能使新的I...
    99+
    2023-10-18
    linux
  • php修改代码不生效怎么解决
    如果你修改了 PHP 代码但没有生效,可能有以下几个原因和解决方法:1. 缓存问题:有时候浏览器或服务器会缓存 PHP 文件,导致修...
    99+
    2023-08-19
    php
  • linux修改时区不生效如何解决
    这篇文章主要讲解了“linux修改时区不生效如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“linux修改时区不生效如何解决”吧!linux修改时区不生效的解决办法:1、登录linux...
    99+
    2023-07-05
  • php修改代码不生效如何解决
    有几种可能的原因导致修改的代码不生效:1. 缓存问题:PHP代码可能被服务器或浏览器缓存,导致修改的代码不生效。解决方法是清除服务器...
    99+
    2023-08-23
    php
  • Django修改了css文件不生效的解决方法
    这篇文章主要介绍了Django修改了css文件不生效的解决方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。解决方法:1、正确配置“settings.py”文件里的“STAT...
    99+
    2023-06-15
  • elementUI弹窗里的表单重置不生效问题解决
    还有最后一个小模块项目马上就做完了,最一个模块比较简单,还是一个表格,表格每一行的最后有两个按钮,修改和删除,新增按钮则在表格外面。点击修改和新增按钮可以弹出一个表单弹窗。修改可以回...
    99+
    2023-05-17
    element 表单重置不生效 element 表单重置
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作