《重置 ElementUI、重置成本》
一、解决方案简述
在使用ElementUI时，有时会因为样式冲突或者需要定制独特的风格而要重置其样式。对于重置成本的考虑，既要实现样式的个性化定制，又要尽量减少对原有框架结构和功能的影响，以降低开发和维护成本。
二、通过自定义样式覆盖的方式重置
1. 使用scss变量覆盖
ElementUI支持scss变量，这是比较方便的一种方式。在项目中安装sass - loader等必要的依赖。
javascript
npm install sass-loader node - sass --save - dev
然后创建一个自己的scss文件，例如element - custom .scss，在这个文件里引入ElementUI的scss文件并修改其中的变量值。
scss
// element-custom.scss
@import "~element - ui/packages/theme - chalker/src/index";
// 修改按钮背景颜色变量为例
$--button - background: #ff0000;
最后在vue.config.js中配置将这个自定义的scss文件全局引入。
javascript
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `@import "./src/assets/styles/element-custom.scss";`
}
}
}
}
这种方式只需要修改想要改变的变量值，不需要改动太多ElementUI源代码，成本相对较低。
2. 直接在css中进行样式覆盖
如果不想用scss，也可以直接写css规则来覆盖。不过要注意优先级问题。例如要改变el - input组件的边框颜色：
css
.el-input__inner {
border-color: blue!important;/* 使用important提高优先级 */
}
但是这种做法可能会导致样式管理混乱，并且当ElementUI版本更新时，可能存在样式被覆盖的情况，需要重新调整，增加了后期维护成本。
三、基于深度拷贝组件并修改的方式
可以将ElementUI的组件进行深度拷贝到自己的项目中，然后根据需求修改组件内部的样式和结构。这虽然能够完全按照自己的想法定制，但工作量较大，而且一旦ElementUI有更新，自己修改后的组件可能无法与新版本兼容，后续维护成本很高。所以除非有特殊需求，否则不建议采用这种方法。
