概述
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，les
最后
以上就是神勇秋天为你收集整理的vue 组件不受全局样式影响_vue 修改第三方样式库并不影响别的页面的全部内容，希望文章能够帮你解决vue 组件不受全局样式影响_vue 修改第三方样式库并不影响别的页面所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复