本文已参与[新人创作礼]活动,一起开启掘金创作之路
在style中给组件设置了样式
却无法查询到
此时我们就需要了解一下scoped
作用:让css也有独立的作用域,当前组件写的样式只对当前组件的template生效
1.给当前组件中所有元素加一个 [data-v-hash],如果用了组建,只会给组件的根添加,会导致组件内的元素样式无法生效
2.给所有选择器加一个属性交集选择器
之前的样式其实相当于
我们可以看到并不是[data-v-hash].ql-deitor交集选择器
解决方案:设置深度选择器或者说样式穿透
less
scss
需要使用::v-deep
原理是因为将之前的交集选择器变成了后代选择器,[data-v-hash] .ql-editor
此时我们就能看到样式生效了
自我总结:
1.给组件添加样式先看是不是权重问题
2.如果压根都没有显示出来,则设置深度选择器
3.如果深度选择器设置了但是样式没有改
4.此时提高权重即可