解决elemen-ui组件内样式无法选中-Vue style 深度作用选择器

出现的问题？

在使用element-ui时，需要改变组件自身样式，但是由于vue-cli中的style设置了scoped，只能在最外层的标签作用上[data-v xxxx]，，组件内部的标签不会添加[data-v xxx]这个属性。所以 再style中并不能选中你想改的ele组件标签。

下面让我们看一下如何解决。

>>>

当vue-cli为正常css时我们可以通过>>> 来解决深度选择出现的问题

<style lang="css" scoped>
  .content >>>.el-table__header-wrapper {
      height: 92px;
      margin: 10px 0;
  }
</style>

::v-deep

当style设置为scss或者sass时我们可以通过::v-deep解决

<style lang="scss" scoped>
.home {
  .content {
    ...
    .el-table {
        ...
      &::v-deep .el-table__header-wrapper {
        height: 92px;
        margin: 10px 0;
      }
    }
  }
}
</style>

这段代码会编译为

.home .content .el-table[data-v-fae5bece] .el-table__header-wrapper {
    height: 92px;
    margin: 10px 0;
}

&在scss是父级标签的意思sass同理

/deep/的坑

因为看网上有一些教程可以通过/deep/ 解决问题自己亲身试了不生效，通过国外网站发现 最新版本的scss中/deep/已经废弃了现在必须使用v-deep来解决这个问题。