如何修改elementUI的默认样式

在开发中我们发现修改elementUI样式的时候，添加了scoped的组件修改样式是无效的。
首先我们要了解一下scoped是什么？
官网是这样说的：

当< style >标签有scoped属性时，他的css只作用于当前组件的元素。
使用scoped后，父组件的样式不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的scoped CSS和子组件的scoped
CSS的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

由于element的样式是全局引入的，所以你想在某个页面里面覆盖他的样式就不能加scoped。
方法一：
style中不加scoped，但是直接写在全局样式里，会污染全局样式，但是如果需要全局使用这个样式，可以写一个通用的样式全局使用

如果你只想覆盖单个页面element的样式，就需要使用下面的方法
方法二： 不加scoped的情况下，可以给他的父级元素加一个class，用命名空间来解决问题
代码如下

<style lang="scss">
.ship-select { // 父级元素
  height: 30px;
  margin-left: 20px;
  .el-select {
    height: 30px;
    .el-input__icon {
      line-height: 30px;
    }
    .el-input,
    .el-input--suffix .el-input__inner {
      height: 30px;
    }
  }
}

方法三： 在style标签加scoped的情况下，使用深度选择器（推荐）
如果是sass/less的话可能无法识别。在这些情况下，你可以使用/deep/ 或者 v-deep来样式穿透
代码如下：

<style lang="scss" scoped>
.change-ship {
  position: relative;
  .ship-select {
    height: 30px;
    margin-left: 20px;
    // 深度选择器
    /deep/ .el-select {
      height: 30px;
      .el-input__icon {
        line-height: 30px;
      }
      .el-input,
      .el-input--suffix .el-input__inner {
        height: 30px;
      }
    }
  }
}
</style>

注意/deep/ 后面要有空格，不然样式穿透不会生效。