Vue--为什么有时候在style中用标签无法修改组件样式-scoped

335 阅读1分钟

本文已参与[新人创作礼]活动,一起开启掘金创作之路

style中给组件设置了样式

image.png

却无法查询到

image.png

此时我们就需要了解一下scoped

作用:让css也有独立的作用域,当前组件写的样式只对当前组件的template生效

1.给当前组件中所有元素加一个 [data-v-hash],如果用了组建,只会给组件的根添加,会导致组件内的元素样式无法生效

2.给所有选择器加一个属性交集选择器

之前的样式其实相当于

image.png

我们可以看到并不是[data-v-hash].ql-deitor交集选择器

image.png

解决方案:设置深度选择器或者说样式穿透

less

image.png

scss

需要使用::v-deep

原理是因为将之前的交集选择器变成了后代选择器,[data-v-hash] .ql-editor

此时我们就能看到样式生效了 image.png

自我总结:

1.给组件添加样式先看是不是权重问题

2.如果压根都没有显示出来,则设置深度选择器

3.如果深度选择器设置了但是样式没有改

4.此时提高权重即可