修改elementui的样式
修改 Element UI 样式的常用方法
使用全局样式覆盖
在项目的全局 CSS 文件中（如 App.vue 或 main.css），直接覆盖 Element UI 的默认样式类名。需要确保选择器权重足够高。
.el-button {
background-color: #ff0000;
border-radius: 10px;
}使用深度选择器
在 Vue 单文件组件中，使用 /deep/ 或 ::v-deep 穿透 scoped 样式限制（Sass/Less 需对应语法）。
<style scoped>
::v-deep .el-input__inner {
border-color: #00ff00;
}
</style>自定义主题变量
通过修改 Element UI 的 SCSS 变量文件实现主题定制。新建 element-variables.scss 文件：
$--color-primary: #1890ff;
$--border-radius-base: 4px;
@import "~element-ui/packages/theme-chalk/src/index";在 vue.config.js 中配置 loader：
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/styles/element-variables.scss";`
}
}
}
}使用 CSS Modules
通过 :global 修饰符在 CSS Modules 中覆盖样式：
<style module>
:global(.el-menu) {
background-color: transparent;
}
</style>组件级样式覆盖
在组件内直接为 Element 组件添加自定义 class，通过更高优先级选择器覆盖：
<el-button class="custom-btn">按钮</el-button>
<style>
.custom-btn.el-button {
padding: 12px 24px;
}
</style>运行时修改主题色
调用 Element 提供的 changeTheme 方法动态修改主题：
import { changeTheme } from 'element-ui/src/utils/theme-color'
changeTheme('#ff0000')注意事项
- 覆盖样式时需检查最终生成的 CSS 选择器权重
- 避免使用
!important，优先通过增加选择器特异性解决 - 修改组件库样式后建议进行回归测试，防止影响其他组件
- 主题变量修改后需要重新编译项目
以上方法可根据实际需求组合使用，对于复杂定制推荐采用 SCSS 变量修改的方式保持样式一致性。
