在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>