如何修改Element UI Upload按钮颜色：将蓝色改为绿色

以下是几种可行的修改方案，按需选择：

方法1：使用内置Success类型按钮 #

直接将上传组件内的按钮type属性改为success，Element Plus内置的success类型按钮默认就是绿色，能快速匹配需求：

<el-upload
  v-model:file-list="fileList"
  class="upload-demo"
  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
  multiple
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  limit="3"
  :on-exceed="handleExceed"
>
  <!-- 替换type为success -->
  <el-button type="success">Click to upload</el-button>
  <template #tip>
    <div class="el-upload__tip">
      jpg/png files with a size less than 500KB.
    </div>
  </template>
</el-upload>

方法2：自定义CSS匹配特定绿色 #

如果需要完全和目标按钮的绿色一致，可通过自定义CSS覆盖原按钮样式（以目标绿色#67c23a为例）：

/* 基础样式 */
.upload-demo .el-button--primary {
  background-color: #67c23a;
  border-color: #67c23a;
}

/* 鼠标悬停状态 */
.upload-demo .el-button--primary:hover {
  background-color: #85ce61;
  border-color: #85ce61;
}

/* 点击激活状态 */
.upload-demo .el-button--primary:active {
  background-color: #529b2e;
  border-color: #529b2e;
}

方法3：全局主题配置（全项目统一） #

如果希望项目中所有Primary类型按钮都改为该绿色，可通过Element Plus的主题定制功能实现：

1. 在项目配置文件（如vite.config.js）中开启Sass样式导入：

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' })],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element.scss" as *;`,
      },
    },
  },
})

2. 在src/styles/element.scss中修改主题色：

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #67c23a,
    ),
  )
);

内容的提问来源于stack exchange，提问作者Bedirhan Ateş