2.12 vue中css scoped的原理

html-css014

2.12 vue中css scoped的原理,第1张

1.在组件中增加的css加了scoped属性之后,就在会在当前这个组件的节点上增加一个 data-v-xxx属性。

2.此组件的所用的css,都会被设置为属性选择器例如下:

3.通过css的属性选择器从而解决了多个组件重复的class,会导致冲突的问题

前两天在项目中遇到一个问题,需要手动去修改引入的第三方组件的CSS样式,我第一想法就是直接在组件上新增一个自定义的class去覆盖原有的样式,结果当然是行不通的(不然我现在也不会在这里写这篇)。 于是我查了一下,是因为我在vue组件里面将设置成了局部样式,局部样式只在当前组件生效,对引入的其他组件是无法起作用的。然后我试了一下,把 scoped 去掉就行了。 或者在组件里面写多一份全局样式 但是如果不在style里面写 scoped ,直接写成全局样式,最后可能会面临多个组件之间样式污染的问题。如何使得局部样式可以覆盖到引入的第三方组件呢,我想到以前涉及过的一个名词 样式穿透 ,立刻实践了一下,果然就成了。样式穿透 需要定义一个外层的style,通过 >>>可以使得socped属性下的的样式穿透到全局, 外层 >>>第三方组件 或者 外层 /deep/ 第三方组件 。 >>>是 /deep/ 的别名,但是在sass之类的样式预处理器之中无法正确解析。