Element-ui之修改样式

修改样式的方法

1. 官网上面介绍了几种方法；
2. 当然还有其他的方法，比如直接在vue文件的style里面设置样式进行覆盖，或者引入其他的scss文件（谁说的一定要引入variables.scss，我偏不信），下面为直接在style中通过选择器进行覆盖的样子，结果也是有效的
   
3. 经过一段时间的使用，发现直接在style中添加样式并不好维护，因为很多时候，同一个样式会利用在项目中的很多地方，比如一个后台的所有按钮风格都要一样，我们也不可能每一个都去设置一下样式，如果突然感觉颜色不对，岂不是要每个文件的去修改了，而且有些样式的设置通过这种方式也未必有效（当然其他名字的scss也会有同样的问题，并不总是有效的）
4. 所以我们直接采用element-variables.scss的方法，在src目录下创建common->styles->element-variables.scss目录；
   

基本设置

1. 首先要对引入的element-variables.scss进行基本设置

   $--font-path: '~element-ui/lib/theme-chalk/fonts';
   @import "~element-ui/packages/theme-chalk/src/index";

   

2. 然后我们就可以快乐的开始修改样式啦！

修改默认颜色

1. Element-ui的默认颜色是鲜艳、友好的蓝色，当我们需要修改整体风格的颜色时，只需要在element-variables.scss里添加一条简单的代码，$的这种写法是scss里对变量的修饰符。
   

修改button的样式

1. 在处理其他组件的样式，我们通常不会直接进行修改，而是通过交集选择器的方式限定范围，如下图（注意，这儿的限制选择器放到默认的样式后面，可以更好的进行维护）

   .el-button.edit {
     color: #fff;
     background-color: #333;
   }
   .el-button.add {
     color: #fff;
     background-color: #666;
   }
   .el-button.delete {
     color: #fff;
     background-color: #999;
   }

2. 在组件里面进行使用

   • 首先引入element-variables.scss文件

     <style rel="stylesheet/scss" lang="scss" scoped>
     @import "~@/common/styles/element-variables.scss";
     </style>

   • 在遍历里面加入class便可完成样式的修改

     <el-button class="edit">编辑</el-button>
     <el-button class="add">添加</el-button>
     <el-button class="delete">删除</el-button>

3. 最终效果如下