vue 修改第三方样式库并不影响别的页面

vue 修改第三方样式库并不影响别的页面

1.需要场景

当 在vue中 style 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，防止样式的全局污染，尤其是在我们引用第三方库的，可能它们没有达到我们的要求，我们需要去修改第三方的样式，如果我们不加scoped的时候可能在别的页面也会修改我们的样式。

2.解决方案

• 方法1(需要大量修改样式)：
  我们知道在一个vue的页面中，可以使用多个style标签来设置多个样式，我们将第一个样式设置为scoped，然后在写一个样式来使用修改第三方的样式，如图：
  
  image.png

但是这样我们需要注意的问题是，要将样式包住，每个页面都有有一个不同的大的类名，如a.vue 页面我们设置.containerA{ }，b.vue { } 页面我们设置类名.cintainerB{ } 这样防止我们的样式在别的页面污染，如果所有页面都需要修改的话，那么我们直接见一个全局的文件，将css样式写在全局文件中
这样写的的时候可以将样式设置到整个项目中的所有文件：

image.png

image.png

可以看到home和about中的样式都修改了。

• 方法2(不需要大量修改样式并没有使用css样式处理器)：
  如果我们没有大量的样式修改样式的时候，并且没有使用scss，stylus，less预处理器的时候，那么我们可以使用>>>这个符号来全局设置类，但是样式只能穿透到它的子组件中，我下面来demo让大家看的更详细一些

image.png

image.png

所以只是父组件中的样式改变了，而子组件的样式中的样式并没有改变。

加上>>>后：

image.png

image.png

我们可以看到样式直接设置到子组件的类名上了，但是当我们使用了css预处理器后>>>
这个就不会管用了

image.png

image.png

可能是处理器解析不出来>>>这个符号吧~

• 方法3(不需要大量修改样式并使用了css样式处理器)：
  它跟方法2是一样的，也是只是在将样式设置到子组件下 只需要将>>>修改为/deep/

image.png

image.png