修改elementui的样式

修改 ElementUI 样式的方法

通过全局样式覆盖
在项目的全局样式文件（如 App.vue 或 main.css）中直接覆盖 ElementUI 的默认样式。需确保选择器优先级高于默认样式，可通过添加 !important 或更具体的选择器实现。
示例：

.el-button {
  background-color: #ff0000 !important;
}

使用 scoped 样式局部修改
在 Vue 单文件组件的 <style scoped> 中修改样式，但需注意 scoped 样式可能因作用域限制无法生效。可通过 ::v-deep 或 /deep/ 穿透 scoped 限制。
示例：

::v-deep .el-input__inner {
  border-color: #00ff00;
}

自定义主题变量
通过修改 ElementUI 的主题变量实现整体样式调整。需安装 sass 并创建主题文件，覆盖默认变量后重新编译。
步骤：

1. 创建 element-variables.scss 文件，修改变量如 $--color-primary: #ff00ff;。
2. 在项目入口文件引入该文件：

   import './element-variables.scss';
   import ElementUI from 'element-ui';
   Vue.use(ElementUI);

使用 CSS 命名空间
若 ElementUI 版本支持，可通过配置 namespace 避免全局样式冲突。在初始化时设置自定义命名空间：

Vue.use(ElementUI, { namespace: 'custom-' });

此后所有组件类名前缀将变为 custom-（如 custom-el-button）。

注意事项

• 避免直接修改 node_modules 中的源码。
• 全局样式覆盖可能影响其他组件，建议优先使用局部样式或主题定制。
• 修改后若未生效，检查样式加载顺序或使用开发者工具调试优先级。