[element ui]如何定制化自己el ui的样式？

el ui 组件大大的提高了我们的开发效率，将一些逻辑和样式封装起来，我们可以直接使用，十分的good。但是，对于公司的一些定制化的需求，仅仅靠着组件提供的api是不方便解决的，特别是样式上的问题。
如果可以修改对el ui组件的样式直接进行修改，那么我们的工作就简化成了修改，而不是重复的造轮子。

存在的问题

对于使用vue开发的同学来说（比如说我司），想要在一个页面或者一个component中修改el ui的样式，基本无可避免的会影响整个项目中其他的相同的el ui组件的样式，原因是样式是全局的。如果加上scoped,修改又不会生效。

解决办法

经过了一天的思考和实验，走了不少弯路，比如写内联的style 和 在 postcss 中加上 !important等方法，发现指标不治本，而且还是会不经意间影响全局其他的el ui组件，怎么样将修改限制到局部作用页面中？

利用postcss和dom的层级关系，进行针对性的修改。

例子

比如有以下代码：

    <el-button type="primary">
      主要按钮
    </el-button>
    <el-button type="primary">
      主要按钮2
    </el-button>
复制代码

css：

.button1 {
  opacity: 0.5;
}
.button2 {
  width: 100px;
  height: 100px;
}

复制代码

现在我有两个需求：

• 按钮1背景改为半透明的；
• 按钮2外形改为正方形；

查看组件的api是无法达到这个需求的，那么我直接开始进行修改！

打开控制台，可以看到以下dom结构：

如果直接进行修改，肯定会影响另外一个按钮，达不到我们想要的效果。所以，可以如下：

• 再添加一个class：

<el-button type="primary" class="button1">
      主要按钮
</el-button>
<el-button type="primary" class="button2">
      主要按钮2
</el-button>
复制代码

效果如下图：

• 外面套一层全局唯一的dom：

<div class="button1">
      <el-button type="primary">
        主要按钮
      </el-button>
</div>
<div class="button2">
      <el-button type="primary">
        主要按钮2
      </el-button>
</div>
复制代码

postcss:

.button1 {
  & .el-button {
    opacity: 0.5;
  }
}
.button2 {
  & .el-button {
    width: 100px;
    height: 100px;
  }
}
复制代码

效果如下：

这个例子还看不出什么区别，但是有的情况下组件的dom嵌套过深，无法直接添加class，用第二种方法一层一层的去找，也还是可以接受的。
不管怎么说，都不太优雅，但也提高了一些逻辑代码的复用度，减少了项目复杂度和工期，也未尝不可一试。