vue由于scoped应如何修改第三方样式

由于scoped属性的样式的隔离，导致无法修改第三方的样式的原因：

scoped 属性会自动添加一个唯一的 属性(比如 data-v-21e5b78) 为组件内 CSS 指定作用域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover，使得样式只在这个组件生效，不会导致污染全局样式。

解决方法：

1、如果是css 使用>>>

外层>>>  需要修改的第三方，例如：

<style scoped>

  .indexPage>>> .el-table thead th{
      background-color:pink;
  }
  
</style>

2、如果是scss或者less 使用::v-deep或者/deep/

::v-deep 需要修改的第三方或者/deep/  需要修改的第三方，例如：

<style scoped lang="scss">
  .indexPage{
    // /deep/ .el-table thead th{
    //   background-color:pink;
    // }
    ::v-deep .el-table thead th{
      background-color:pink;
    }
  }
  
</style>