在 Vue 3 + Vite 项目中覆盖 Element Plus 的默认样式

h5打开以查看

主要有两种思路：一是全局替换设计变量 （适合整体修改主题色、圆角等），二是局部覆盖特定样式（适合微调某个组件的细节）。

具体操作取决于你的需求，下面分情况说明。

🎨 方案一：全局覆盖 SCSS 变量（修改主题）

如果需要系统性修改主题色、圆角等，推荐通过覆盖 Element Plus 的 SCSS 变量实现。这样改动会全局生效，也便于维护。

安装必要依赖

Element Plus 基于 SCSS 编写样式，需要确保项目支持 SCSS。

bash
复制代码
```
npm install sass -D
```

创建变量覆盖文件

在 src/styles 目录下新建 element-override.scss 文件，写入以下内容：

scss

复制代码

// 覆盖 Element Plus 的 SCSS 变量
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #4095e5, // 修改主题色为自定义颜色，如蓝色，可改为绿色等
    ),
  ),
  $border-radius-base: 8px // 修改全局圆角大小
);

// 必须引入 Element Plus 的完整样式
@use "element-plus/theme-chalk/src/index.scss" as *;

在入口文件中引入

在 main.js 或 main.ts 中引入该文件，注意不要 再引入 element-plus/dist/index.css。

javascript

复制代码

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import './styles/element-override.scss' // 引入自定义样式

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

修改完成后，项目中所有 Primary 按钮颜色都会统一变化。

🔧 方案二：局部覆盖特定组件样式（微调）

如果只是想微调某个表格或弹窗的样式，利用 :deep() 深度选择器是更合适的方法。

原理说明

在 Vue 单文件组件中，<style scoped> 会给 CSS 选择器加上特殊的属性（如 data-v-xxx）以防止样式泄漏。而 :deep() 可以穿透这种限制，让自定义样式命中组件库内部的 DOM 元素。

推荐写法 (Vue 3 官方)

使用 :deep() 语法配合组件的类名即可。

vue

复制代码

<template>
  <el-table :data="tableData" class="custom-table">
    <!-- 表格列 -->
  </el-table>
</template>

<style scoped lang="scss">
// 使用 :deep() 穿透修改表格表头背景色
.custom-table :deep(.el-table__header th) {
  background-color: #f5f7fa;
  color: #303133;
}

// 修改表格行高
.custom-table :deep(.el-table__row) {
  height: 48px;
}
</style>

注意事项
- 类名确认 ：修改样式前，建议先用浏览器开发者工具（F12）查看 Element Plus 组件实际渲染出来的 DOM 类名（如 .el-table__header），确保选择器正确。
- 避免滥用 !important ：尽量通过提高选择器权重（如增加父级类名）来覆盖样式，慎用 !important，以免后续难以维护。

🧩 关于按需引入

如果项目使用了 unplugin-vue-components 实现按需引入，需要额外配置 vite.config.ts，指定使用 SCSS 源码，这样变量覆盖才能生效：

javascript

复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass' // 关键配置：指定引入 sass 而非编译后的 css
        })
      ]
    })
  ],
  css: {
    preprocessorOptions: {
      scss: {
        // 自动注入全局变量
        additionalData: `@use "@/styles/element-override.scss" as *;`
      }
    }
  }
})

可以这么理解 ：整体换肤就用方案一覆盖 SCSS 变量；单独微调某个组件就用方案二配合 :deep()。这两种方式基本能覆盖日常开发中所有样式修改需求。

h5打开以查看