当我们在写业务时, 需要修改当前页面elementUI的样式, 但是为了不想修改的样式影响到别的组件, 需要添加scoped, 但是当我们添加了scoped后, 第三方样式的class后也会被加上hash值, 该怎么处理?
使用深度选择器 >>> :
<style scoped>
.a >>> .b { /* ... */ }
</style>
上面这么写将会编译成:
.a[data-v-f3f3eg9] .b { /* ... */ }
**注意: **
如果使用CSS预处理器, 会无法编译>>>, 我们可以使用/deep/或者::v-deep来代替
但/deep/在dart-sass中使用会报错
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
vue scoped 深度作用选择器 如果你希望scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，...
在vue中引入了scoped这个概念 ,scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式 ,使用...
深度选择器 vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对...
vue 修改第三方样式库并不影响别的页面 1.需要场景 当 在vue中 style 标签有 scoped 属性时，...
我们在vue中使用Element库的时候，vue组件中样式的scoped会导致我们无法修改控件的样式。 解决方法是...
在组件中需要使用本地样式，即scoped样式文件。在该文件中，父组件无法修改子组件的样式，选择器只能找到子组件的根...
在vue或者react开发时，有时需要对第三方组件的样式进行临时修改，如果页面style使用了scoped，页面的...
深度选择器 如果您希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合器： .a >>> ....
样式穿透 在开发中修改第三方组件样式是很常见，但由于 scoped 属性的样式隔离，可能需要去除 scoped 或...
问题: 当我们在写业务时, 需要修改当前页面elementUI的样式, 但是为了不想修改的样式影响到别的组件, 需...
本文标题：Vue使用深度选择器在scoped中修改第三方样式
本文链接：https://www.haomeiwen.com/subject/bnmlyhtx.html
网友评论