Element Plus 样式覆盖失效及引入配置问题解决

作者：青团子

时间：2026-10-31

本文解决 Element Plus 在 Vue 3 项目中样式重写失效及引入后不生效的问题。详细讲解如何使用深度选择器（如 >>>、/deep/、::v-deep）在 scoped 样式中修改组件内部元素，并补充完整的项目安装与 main.js 引入配置步骤，确保 UI 库正常加载。

文章目录

使用element-plus时重写样式不起作用的问题及解决方法

若需修改 Element Plus 组件的默认样式，可借助深度选择器（Deep Selector）。这是一种特殊的 CSS 机制，允许开发者穿透组件封装，直接定位并修改其内部子元素的样式表现。

以下以修改 ElButton 组件文字颜色为例，展示具体实现方式。

<template>
  <el-button class="my-button">点击按钮</el-button>
</template>
<style scoped>
.my-button >>> .el-button__text {
  color: red;
}
</style>

在此示例中，通过 .my-button >>> .el-button__text 选择器精准定位到 .el-button 组件内部的 .el-button__text 元素，并将其颜色属性设置为红色。

需注意，深度选择器 >>> 仅在启用作用域样式（即在 scoped 模式下）时有效。若使用全局样式，则应改用 /deep/ 或 ::v-deep 来实现相同的穿透效果。

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

问题描述

在手动搭建 Vue 3 项目时，集成 UI 库 element-plus 后，即便严格遵循官方文档步骤操作，样式仍可能未生效。网络上关于此问题的解决方案众多，例如建议卸载 element-plus 后重新安装，但此类方法未必能解决所有情况。本文记录了一种有效解决方案，供遇到相同困扰的开发者参考。

1.安装element-plus

在项目根目录执行命令 npm install element-plus --save 完成安装。安装结束后，可检查 package.json 文件，确认依赖列表中包含 element-plus 以验证安装成功。

使用element-plus时重写样式不起作用的问题及解决方法

2.引入element-plus

在项目根目录下的 main.js 文件中添加以下配置代码：

//引入element-plus模块
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//use方法使用ElementPlus
createApp(App).use(store).use(router).use(ElementPlus).mount('#app');

使用element-plus时重写样式不起作用的问题及解决方法