Element-ui之修改样式

修改样式的方法

1. 官网上面介绍了几种方法；
2. 固然还有其余的方法，好比：
   • 直接在标签上面采用行内式；
     
   • 在组件中的style里面添加样式；
     
   • 引入.scss文件（注意：若是是公用样式最好在index.scss一块儿引用，而后在main.js中进行调用；若是使用该样式的组件很少，就按需引入，不要引入其余没必要要的scss文件）
     
     注：这儿的优先级是: [行内的样式>组件中'style'里面的样式>引入的scss样式]， 若是是从外部引入的scss样式，当修改的标签样式是由多个class共同做用时（以下图），必须加上!important才会生效

1. 在真正的项目中直接在组件中的style中添加样式并很差维护（除非真的是本组件特有的样式），由于不少时候，同一个样式会利用在项目中的不少地方，好比一个后台的全部按钮风格都要同样，咱们也不可能每个都去设置一下样式，若是忽然感受颜色不对，岂不是要每一个文件的去修改了，并且有些样式的设置经过这种方式也未必有效（固然其余名字的scss也会有一样的问题，并不老是有效的
2. 因此咱们直接采用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";

1. 而后咱们就能够快乐的开始修改样式啦！

修改默认颜色

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

修改el-button的样式

1. 在处理其余组件的样式，咱们一般不会直接进行修改，而是经过交集选择器的方式限定范围（若是须要将el-button的各类状态下的样式都修改，请按照下面的顺序，这和<a>标签是相同的道理）

.add {
  &.el-button {
    background-color: #666 !important;
    border-color: #666 !important;
  }
  &.el-button:focus {
    background-color: #999 !important;
    border-color: #999 !important;
  }
  &.el-button:hover {
    background-color: #aaa !important;
    border-color: #aaa !important;
  }
  &.el-button:active {
    background-color: #eee !important;
    border-color: #eee !important;
  }
}

1. 在组件里面进行使用
   • 这种做用域全局的样式，最好统一在index.scss中引用，而后在main.js引入index.scss

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

   • 而后在el-button中的加上对应的class即可

   <el-button class="add">添加</el-button>

2. 最终效果以下