文章目录
使用场景
引入使用了第三方的组件,想修改它的样式,找到其class名称,然后在style中重写该class,无效
原因:可以查看下面的文章
官方的解释
style scoped
我们常用的css样式写在style中
范围样式:在style标签中 声明scoped,这样写的用处是:
如果一个组件的style中有声明scoped的话,那么可以避免自己的样式被污染。这里被污染的意思是引用者使用了同名的选择器的时候会修改组件样式。
会多一个data-v-xxx形式的class
但是这么做也就造成了,引用者想要修改组件的样式的时候,不能直接使用选择器修改,会无效
那么如果想要修改scoped的样式,就要使用到样式穿透(一般都是在需要修改第三方组件的时候使用)
样式穿透
使用样式穿透时,所用的是css或者scss中,还会有所不同:
参考
如果你使用的是css,没有使用css预处理器,则可以使用>>>,/deep/,::v-deep。
如果你使用的是less或者node-sass,那么可以使用/deep/,::v-deep都可以生效。
如果你使用的是dart-sass,那么就不能使用/deep/,而是使用::v-deep才会生效。
所以通用的应该选择::v-deep的写法:比如:
.aaa ::v-deep .bbb{
...
}