h5打开以查看

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

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

---

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

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

1. 安装必要依赖
   Element Plus 基于 SCSS 编写样式，需要确保项目支持 SCSS。

   bash

   npm install sass -D

2. 创建变量覆盖文件
   在 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 *;

3. 在入口文件中引入
   在 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() 深度选择器是更合适的方法。

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

2. 推荐写法 (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>

3. 注意事项

   • 类名确认：修改样式前，建议先用浏览器开发者工具（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打开以查看