使用Element-Plus样式失效的解决方法

最新推荐文章于 2025-02-21 11:28:35 发布

卤君

最新推荐文章于 2025-02-21 11:28:35 发布

阅读量1.3k

点赞数 2

文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_74738939/article/details/133641776

版权

在我今天写样式的时候碰到了使用ElementBox样式的失效，查贴后发现原来是因为手动引入与按需自动引入的冲突。

如果使用了自动按需引入，在使用组件的时候，你还import组件那么会导致样式冲突，即样式出不来，这个时候删除掉import的组件即可。

删除前

删除后

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

卤君

关注关注

2
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

qiankun(微前端) - 解决Element组件库部分样式失效，主应用和子应用分别使用element-ui和element-plus，前端微应用qiankun样式无效污染隔离子应用样式影响其他应用

高级前端工程师

10-29

6326

乾坤qiankun，微前端，vue，qiankun主应用使用vue2+elementui子应用使用vue3+element plus样式失效，子应用样式影响其他应用样式问题，qiankun项目与子应用样式混乱问题，彻底搞定样式污染，前端微应用qiankun样式污染，组件样式部分失效怎么办，互相影响，qiankun子应用中使用element-plus样式失效问题，组件库样式污染混乱，子应用样式影响到主应用怎么办，微前端qiankun子应用样式影响其他应用样式，样式冲突，Vue+qiankun框架样式混乱问题的

Vue3 - Element Plus 全局修改更换主题色配置详细教程，element-plus自定义主题色全局替换主色调强力解决方案，支持动态修改主题颜色/动态皮肤，将默认蓝色主题色更换为其他颜色！

王二红

08-14

1万+

vue3，nuxt3，element-plus，组件库，主题色，修改主题颜色，更换主题色，如何修改组件默认主题蓝色，项目主题色定制，修改失败，主题色覆盖不了，:root直接修改，hover颜色没改，自定义主题色，vue3全局设置elementPlus主题色最新详细修改教程，怎么修改全局的颜色，scss变量，覆盖原来的主题色改为自己的颜色，统一替换，有没有好办法，颜色不变，失败，无效，动态主题切换，主题颜色怎么在项目里直接改，plus主题色更换，覆盖默认主题色，最强最好用，设置主题色，换肤，皮肤，动态更换

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

解决Vue 3在使用element-plus时重写样式不起作用的问题

一起学习

08-27

3109

本文主要介绍Vue 3在使用element-plus时重写样式不起作用的几种情况。

Element Plus组件库使用组件自动导入后样式不生效的问题

qq_45569925的博客

05-15

2028

由此可以看出虽然按照官网上的步骤进行配置了，但是样式并没有因此而生效。错误原因：是因为在使用以下命令进行依赖的安装的时候默认安装的是最新版的。配置完成后，去组件中去测试组件库中的button组件的样式是否生效。的版本安装为0.26.0即可。然后重新运行项目查看结果。然后运行代码查看效果。

Vue3+Vite+Element Plus,主题色样式不生效问题(已解决)

最新发布

qq_45126867的博客

02-21

716

但是都没用，也试过修改成官方的/styles/element/index.scss完全一样的路径以及完全一样的配置代码，全都没用。还尝试过检查其他css文件是否存在样式冲突和覆盖，甚至去看项目自带的var.scss有无问题，但是开发到后期的时候使用button和tag，发现颜色不对，又变回默认样式了，就排查了很久，也看过main.js的导入顺序是否有问题，都已失败告终，花了好长时间。最初开发这个项目的时候，按照官网这个方法自定义主题色样式，当时是生效的。删除这一句之后重启vue项目，主题色样式生效。

02-解决关于Element Plus未报错但样式失效问题

我们的目标是星辰大海！

03-14

504

02-解决关于Element Plus样式失效问题

VUE3.2引入Element-plus样式不生效问题

RRLH88888的博客

10-26

4277

element-plus使用遇到的样式问题。

element-plus中布局组件样式不生效解决方法

zhengdec的博客

12-01

508

问题来源未知，解决方法如下（代码来自官方文档）：为使用布局组件的文件添加如下样式：.el-main,.el-main {

Element-PLUS下拉框、日期组件、下拉菜单定位问题 element-plus下拉框组件定位问题 element-plus日期组件定位问题

半只

08-27

947

Element-PLUS 下拉框、日期、下拉菜单等组件使用的都是 Popover，在组件中增加。属性，所有Popover相关的组件都可以参考下面示例解决。

Vue3.0 + Ts 项目使用element-plus 自动按需导入使用v-loading报错

weixin_44209082的博客

04-18

2565

问题展示：使用v-loading报错无法找到样式 element-plus/es/components/loading-directive/style/css 解决办法： element-plus版本： "element-plus": "^2.1.9" "unplugin-auto-import": "^0.7.1", "unplugin-vue-components": "^0.19.3" 使用正则表达式，排除loading-directive的样式 exclude: new RegExp(

element-plus Message样式不生效添加样式穿透也不生效

爱吃猫的鱼

08-25

937

element-plus Message样式不生效添加样式穿透也不生效

vue中element组件样式修改无效的解决方法

08-28

下面小编就为大家分享一篇vue中element组件样式修改无效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue3项目引入element-plus模块样式不生效问题解决

热门推荐

LoFreedomAND的博客

07-19

1万+

手动创建vue3项目后，在搭建页面时需要使用UI库时，按照官方给的步骤操作之后，很遗憾样式并没有生效，上网查了，众说纷纭，有的说是卸载后重新安装，但是我的问题还没有解决，后来在一篇文章中找到了答案，这里记录一下，希望能帮到有同样问题的你。好了，直接看解决办法。.........

【element 样式失效】

weixin_58319963的博客

05-17

370

当引入全局样式时，单个组件引入element-plus会导致样式失效。

记录一次Vue3.0引入ElementPlus之后样式不生效的一个大坑

m0_67401761的博客

03-07

4531

事情是这样的，我呢，主要是做后端的，很少碰前端，而且真心不擅长前端，每次碰都特别痛苦。但是最近实在是有点闲，为了能优化一下我前一阵做的一个服务型项目，准备加几个页面实现配置业务参数和查询执行记录之类的功能。所以上网看了看教程，搭了一个VUE3.0的项目，并且准备用ElementUI为VUE3.0推出的ElementPlus作为UI库。于是我就按照教程，使用VUE/CLI脚手架搭了一个项目，并且配置了vue.config.js的配置文件（这里画个重点要考的！），然后按部就班配置了vue-router和ele

Element-plus组件库的消息弹出框没有样式（或者样式错误）

qq_51389038的博客

10-10

965

直接引入样式就行了。

vue3 引入“element-plus“组件的CSS没效果

2402_83653169的博客

04-17

654

尝试用Vue3做开发项目总是遇到各种莫名其妙的问题，记录下来，免得再犯，若其他人遇到同类问题，也希望会有所帮助。遇到的问题就是，在vue3中引入element-plus组件，但是组件的css效果没有引入，没有表现出来。原因在于.use(),不能直接在一个括号里，接着写，虽然语法不给你报错，但内容不给你上。后来才发现错了一点，把Vue2的习惯带到Vue3来了。配置也是一步一步跟着官网做。

VUE项目CSS样式穿透，轻松解决element-puls样式不生效的问题

zs_ms的博客

05-31

1228

再找到你需要样式穿透的选择器如上图的.el-upload-list--picture-card，在需要样式穿透的选择器上加上deep。我们在编辑器上书写的标签，都添加了一个唯一标识符data-v-xxxx(因为scoped),然后样式匹配的时候都是根据这个标识符去匹配，有这个标识符的标签，样式能够直接修改，没有的情况下，我们看看是什么情况。这时候不难看出给el-upload-list--picture-card这个类名匹配了唯一标识符，浏览器渲染的标签并没有这个标记，所以样式不生效。

element-plus在vue3中样式不显示的问题

qq_44947815的博客

07-01

9299

element-plus在vue3中样式不显示的问题

element-plus 项目弹窗样式失效，白板

07-03

Element Plus 是 Vue 3 的官方 UI 组件库，提供了丰富的、简洁易用的界面组件。如果遇到弹窗样式失效的情况，可能是因为以下几个原因： 1. 版本不兼容：检查使用的 Element Plus 是否是最新的版本，有时旧版的某些样式可能会存在兼容性问题。 2. 配置错误：确保在项目的 CSS 或主题配置中正确引入了 Element Plus 的样式文件，比如 `element-ui/lib/theme-chalk/index.css`。 3. 兼容性模式：如果你在使用了一些定制或自定义的主题，确认没有覆盖 Element Plus 的默认样式。 4. 自定义CSS冲突：如果有其他 CSS 文件对弹窗样式进行了重写，可能会导致样式失效，请检查并优先级处理这些冲突。 5. 组件状态未更新：确认弹窗的状态是否已正确设置，并确保其在合适的生命周期钩子中被正确调用（如 `v-model` 或者 `ref`）。解决这个问题的一般步骤包括： - 查看浏览器开发者工具中的元素样式是否有误 - 在控制台检查是否存在报错信息 - 使用 `Vue Devtools` 浏览组件树，确认组件实例和相关属性如果你是在使用 Element Plus 的弹窗组件（如 `el-dialog`），你可以尝试运行以下代码修复，然后观察是否有帮助： ```html <template> <el-dialog :visible.sync="dialogVisible" :width="dialogWidth" /> </template> <script setup> import { ref, onMounted } from 'vue'; const dialogVisible = ref(false); const dialogWidth = ref('400px'); onMounted(() => { // 如果需要初始化样式，可以在这里尝试设置初始值 }); </script> ```