el-popover 自定义class不生效问题

最新推荐文章于 2025-02-09 11:48:54 发布

x_minqu

最新推荐文章于 2025-02-09 11:48:54 发布

阅读量1.3k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_46483779/article/details/128235516

版权

本文探讨了Element UI中自定义class类名放置于scope内不起效的问题，并提供了解决方案，即将样式放置于全局而非局部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是element 的一个坑，就是自定义class类名放在scope里面的时候，不会生效，需要放到全局样式，这下面解决的问题是去掉默认的样式

下面是错误案例

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

x_minqu

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

el-popover和el-tooltip样式修改(普通的组件样式修改方法，对popover是不生效的)

m0_38109616的博客

11-20

4541

el-popover和el-tooltip样式修改(普通的组件样式修改方法，对popover是不生效的)

vue element ui el-popover 样式修改不生效解决方法

热门推荐

疑问搜索动手解决记录

04-03

1万+

在使用element 的el-popover 组件时，会发现自己对el-popover 写的样式不起作用，甚至连使用 ::v-deep ‘>>>’ /deep/ 行内Style 这四种样式穿透都不起作用，这是因为 el-popover生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级。所以需要全局设置style 首先给它添加一个特定的类名 , 千万别重复 , 语义命名以免样式污染 popper-class="down-popover"

参与评论您还未登录，请先登录后发表或查看评论

el-popover 添加自定义类，样式不生效

qq_39706777的博客

02-06

2257

现象：给 el-popover 标签设置 popover-class 属性，为popover添加类名，样式却不生效

popper-class 样式不生效问题

m0_62959350的博客

09-06

4342

穿透都不起作用，这是因为el-popper生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级。所以需要全局设置style。在使用element-plus 的el-popper 组件时，会发现自己对el-popper写的样式不起作用，甚至连使用。然后在当前文件样式中不加scoped写一份。

elementUI 中使用 Popover 弹出框 el-popover自如何自定义样式？（出现 popper-class 不生效，如何解决？）

Missbelover的博客

03-18

4206

这是因为el-popper生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级。所以需要全局设置style ~~~~~~~发现自己对el-popper写的样式不起作用，甚至连使用。

问题：修改el-popover样式不生效

weixin_59630494的博客

09-29

1873

组件时，我想要将样式修改成符合自己主题的样式，遇到自定义样式不生效的问题，尝试过很多方法之后，发现修改的样式都没有生效，包括使用官方文档中提供了一个特殊的类名popper-class，或者甚至使用>>> /deep/ 样式穿透都不起作用；1、去掉scoped，但是不加scoped 会影响其他页面样式，我必须添加scoped，所以我采用第二种。注意：我在写的时候，还遇到一个问题就是使用popper-class的时候不生效。2、在你的Vue文件中，除了已存在的带有。标签外，再添加一个新的。

el-popover的弹框自定义样式没有效果

小陈的博客

02-09

137

el-popover的弹框需要使用全局样式来定义，可在全局样式文件中（如src/assets/styles/index.scss）定义样式，以背景色为例：

组件不渲染 el-popover 添加class和设置宽度无效

weixin_41697323的博客

01-05

9185

需求在穿梭框列表里面给每条数据最右边增加一个小图标，鼠标放上去显示一个提示信息，鼠标单击弹出一个模态框显示列表信息详情，因详情内容比较多，需要把它做成一个可复用的组件来引入，并给组件设置一个宽度，且设置的宽度只在该组件内有效，不能影响其它的组件 Q1：组件通过懒加载的方式导入，页面第一次进来单击小图标，组件内容不显示，关闭页面后重新打开内容可以正常显示 Q2：直接修改它的默认样式会影响其它地方...

el-popover弹出框增加右键点击事件

xuanyuyao的博客

11-23

2739

el-popover增加右键点击事件

el-popover 增加了width为300px属性，el-popover中的内容不会自动换行，超出了el-popover的内容框

最新发布

03-25

### 解决 Element-UI `el-popover` 内容超出宽度不换行的问题当使用 Element-UI 的 `el-popover` 组件时，如果其中的内容超出了设定的宽度（如 300px），可能会出现不自动换行的情况。这通常是因为默认情况下，CSS...

修改 el-popover 子元素的样式 不生效

weixin_52268321的博客

04-28

976

修改 el-popover 子元素的样式 不生效

element ui el-select 中el-popper 组件样式穿透不生效

Gyh9421的博客

08-26

1521

element组件

【element ui】 el-popover 样式修改不生效解决方法

qq_62837899的博客

06-19

3919

解决 el-popover 样式修改不生效问题

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

m0_64760349的博客

10-26

502

开始使用.el-popover修改样式不起作用，后来尝试使用组件穿透:deep或使用！important但是都不起作用原来需要按照官网方法设置类名，但是尝试之后还是不行后来查看控制台。

elementui的el-propover修改样式不生效的问题

Anything2207294253的博客

10-26

2775

项目中使用了el-propver，想修改样式，一直不成功，官方文档使用popper-class设置样式 <el-popover placement="right" width="400" trigger="hover" popper-class="menu_popover" > </el-popover> <style> .menu_popover{ padding: 10px 20px ..

element-ui select组件修改样式不生效的坑

weixin_51210597的博客

05-07

1958

修改element-ui select的样式 <el-select v-if="options.length > 0" @change="handleSelectKeyChange" :value="searchKey" slot="prepend" style="width:110px" placeholder="请选择" :popper-append-to-body="false" popper-class="select-popper"> <e

elementUI中tooltip自定义class样式在scoped下不生效问题

qq_190265950的博客

01-27

8232

在项目中遇到一个觉得比较有意思的坑，在vue框架中使用element，遇到动态添加dom元素的组件时（tooltip, dialog等）,在属性popper-class，自定义class时样式不生效，后面经过分析不生效的原因是vue使用scoped后会在当前组件下每个dom元素上添加一个组件唯一标识（例如data-v-fae5bece），class也会编译成data-v-fae5bece,而我们使用popper-class自定义class想写在scoped中，element动态添加的dom上不具备唯一标识d

修改el-popover样式不生效问题

weixin_44867704的博客

07-19

6456

修改el-popover样式不生效问题在最近公司写的项目中，使用到了el-popover，但是想要修改弹出层中文本的字体样式，尝试过很多方法之后，发现修改的样式都没有生效，查阅资料发现：el-popover比较特殊，他生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级，需要设置全局style，查阅ElementUI官方文档后发现，官方文档中提供了一个特殊的类名popper-class，所以按照官方文档去给el-popover添加一个类名： <el-

element ui的Popover 弹出框修改样式

weixin_62273462的博客

04-25

1123

在vue中定义的popper-class类样式会受到scoped的区域限制，导致这个样式无法超出该组件起作用，更无法在app之外的结点起作用。如果删除该组件的scoped又会污染其他组件的样式。将该popper-class对应的样式移到全局样式中，将该全局样式引入main.js文件。切记样式中需要使用!important。在浏览器终端找到el-popover结点，发现它与id = "app"（vue挂载的根目录）是兄弟结点。在vue组件中用popper-class修改Popover 弹出框样式却发现无效？

修改el-popover样式不生效

07-28

你可以尝试以下几个步骤来修改 el-popover 的样式： 1. 确保你正确地引入了样式文件。在使用 Element UI 的情况下，你需要在你的项目中引入 Element UI 的样式文件（比如 element-ui.css 或者 element-ui.scss）。如果你没有引入这些文件，样式修改可能不会生效。 2. 使用 CSS 选择器来修改样式。在你的 CSS 文件中，使用合适的选择器来选中 el-popover 组件，并修改相应的样式。例如，如果你想修改弹出框的背景颜色，可以使用类名 `.el-popover__popper` 来选中弹出框，并设置 `background-color` 属性。 3. 使用 `!important` 来覆盖默认样式。有时候，Element UI 的默认样式可能会被其他样式覆盖掉，导致你的修改不生效。在这种情况下，你可以在你的 CSS 样式中使用 `!important` 关键字来强制覆盖默认样式。例如，你可以使用 `background-color: red !important;` 来确保背景颜色修改生效。 4. 在需要修改样式的元素上添加自定义类名。在使用 el-popover 的地方，你可以通过 `popper-class` 属性来添加一个自定义的类名，然后在你的 CSS 文件中针对这个类名进行样式修改。例如，你可以添加 `popper-class="my-popover"`，然后在 CSS 文件中使用 `.my-popover` 类名来修改样式。如果你仍然遇到问题，可以提供更多的代码和具体的修改内容，以便更好地帮助你解决问题。