vue如何修改第三方庫的css樣式，如element-ui的樣式，穿透樣式的寫法

在vue專案中，我們經常因為在樣式上加了scoped,避免了元件之間樣式的汙染，但同時帶來的問題是直接修改第三方庫的樣式不生效：
解決辦法：(本例以修改element-ui的scrollbar樣式)
1.再新增個style標籤，標籤上不加scoped欄位，同時修改的樣式前最好加上字首類名（如我寫的是 .scrollbar .el-scrollbar__wrap而不是直接寫.el-scrollbar__wrap），避免汙染，如
<style>
.scrollbar .el-scrollbar__wrap{
    overflow-x: hidden;
}
< /style>

<template>
  <el-scrollbar class="scrollbar">
    <div class="zz">
        地方給
        地方給 
        梵蒂岡
        地方給
        地方給

    </div>
  </el-scrollbar>
</template>

<script>
export default {
name:'leftSlider',
data(){
    return{}
}
}
</script>
<style>
.scrollbar .el-scrollbar__wrap{
    overflow-x: hidden;
}
</style>
<style lang="scss" scoped>
.scrollbar{
    height: 100%;
}
</style>

2.使用穿透，>>>或者 /deep/ 或者 ::v-deep (::v-deep用於scss的樣式，>>>用於css的樣式,...反正不行就一個一個試就行了)

下面是scss的穿透：

<style lang="scss" scoped>
.scrollbar{
    height: 100%;
   ::v-deep .el-scrollbar__wrap{
    overflow-x: hidden;
}
}
</style>