About

有时候我们在vue项目中引入了第三方组件，但是大多数时候组件的样式可能都不满足我们的需求，这时候我们需要修改第三方组件的样式。本文主要介绍了两种修改第三方组件样式的方法

一、局部样式与全局样式混用

一般来说，我们为了不让组件的样式影响其他组件样式，都会在style标签中添加scoped，这样组件中的样式就只适用于本组件而不会影响其他组件，所以如果我们在使用第三方组件的vue文件中书写的样式无法作用于第三方组件。

这时我们可以单独写一个全局CSS，引入到入口文件中，当然也可以直接在入口文件中写全局样式。

例如：我们在页面中引入了swiper组件，但是swiper组件的dots默认是激活状态是蓝色，但是我希望它是白色，并且我还想修改它的大小与位置，如图：

dots为蓝色.gif

通过在App.vue这个大组件中添加全局样式可以修改：

<style lang="scss">
  .swiper-pagination-bullets {
    bottom: 6px;
    .swiper-pagination-bullet {
      width: 6px;
      height: 6px;
    }
    .swiper-pagination-bullet-active {
      background: #fff;
    }
  }
</style>

效果如图所示：

修改全局样式.gif

二、使用CSS扩展语言stylus或者sass来实现样式穿透效果

如果我们使用了CSS扩展语言，那么问题将迎刃而解，我们只需要在当前父组件中的样式中使用穿透关键字即可实现在父组件中修改子组件的样式并且不会造成其他影响。

• 如果你使用的是sass，只需要使用/deep/关键字即可实现样式穿透 （经网友指正是通过style-loader实现，并非sass）

<style lang="scss" scoped>

  /deep/ .swiper-pagination-bullets {
    bottom: 6px;
    .swiper-pagination-bullet {
      width: 6px;
      height: 6px;
    }
    .swiper-pagination-bullet-active {
      background: #fff;
    }
  }
</style>

• 如果你使用的是stylus，只需要将/deep/替换为>>>即可实现