【Vue】关于Style Scope和 :deep

情景说明

1. 基本上，Vue里面写Style，都是<style scoped>
2. 很多时候，需要我们对使用的UI组件做一些调整
3. 你可以会这样做：在网页查审元素，定位要修改组件，找到它的样式名称
4. 你就在<style scoped>里面添加它的CSS样式，发现没有效果

问题分析

1 Vue是如何防止CSS污染的：使用<style scoped>来限定设置样式的有效范围，那么原理是什么呢？

给每一个dom节点元素都添加了不重复的自定义属性（如：data-v-6810cbe5）；然后编译时再给样式的末尾添加属性选择器进行样式私有化（如.btn[data-v-6810cbe5]）

所以正常来说。你设置的样式仅仅在这个Vue组件有效，而你引用的UI组件或者子组件，样式就不会对它们生效了

2 组件使用了内联样式，导致你设置的样式优先级不足

解决方案

1 直接使用style,不设置scoped，这样设置的样式就会全局的生效。这样你改了子组件的样式，如果其他地方也引用了这个子组件，样式也会生效。

2 （推荐）在<style scoped>使用深度选择器:deep(.样式名称){样式}实现样式的穿透。只是只对范围内的子组件样式有效，如果其他地方引用了这个子组件，样式是不生效的。

3 对于优先级不够的，可以使用!important

参考文章

https://juejin.cn/post/6978781674070884366
https://blog.csdn.net/qq_43886365/article/details/129496484