VUE样式穿透问题

一般在使用第三方的组件想要修改样式时，发现直接使用css写出来的样式有时无法将原本第三方默认的样式更改。有<style scoped></style>  scoped 的影响 就可以使用样式穿透解决问题。

样式穿透用法：

第一种 一般不建议使用 用的时候有的属性无法生效

.banner >>> .swiper-scrollbar-drag {

        background: #000;

        border-radius: none;

}

第二种

.banner ::v-deep .swiper-scrollbar-drag {

                background: #000;

                border-radius: none;

}

第三种

  .banner /deep/ .swiper-scrollbar-drag {

                background: #000;

                border-radius: none;

     }