1️⃣ 前言

在使用vue构建项目的时候，引用了第三方组件库，只需要在当前页面修改第三方组件库的样式以做到不污染全局样式。通过在样式标签上使用scoped达到样式只制作用到本页面，但是此时再修改组件样式不起作用。

1️⃣ 通过 >>> 穿透 scoped 来修改第三方组件库的样式

  1.     需要在组件上为第三方组件库加一个包裹层然后加一个类名
  1. <style scoped>
  2.   #box >>> p {
  3.     font-size: 30px;
  4.   }
  5. </style>
  1.     有些Sass 、Less之类的预处理器无法正确解析 >>>。可以使用 /deep/ 操作符( >>> 的别名)
  1. <style scoped>
  2.     /deep/ #box p {
  3.     font-size: 30px;
  4.   }
  5. </style>

1️⃣ 最佳实践

  1.    穿透方法实际上违反了 scoped 属性的意义。而且在vue中过多使用 scoped 导致页面打包文件体积增大。通常能写在 index 中的样式尽量写在 index 中，我们可以通过在 index 样式中通过外层组件添加唯一 class 来区分组件+第三方样式来实现了类似于 scoped 的效果，又方便修改各种第三方组件的样式。
  1. <style lang="less">
  2.   .content{
  3.     .a{}
  4.     .b{}
  5.     ......
  6.   }
  7. </style>

[

](https://blog.csdn.net/idomyway/article/details/94659598)