vue(scoped)修改UI库组件样式

1,547 阅读1分钟

vue修改UI库组件样式

在工作中经常会碰见设计稿和UI库的组件样式不一样,在style标签加了scoped,就无法修改UI组件的样式了,因为当前组件样式只应用到这个组件上。

深度作用选择器

如果你想修改组件的样式就可以使用 >>> 操作符:

<style scoped>
.langpz >>> .b { /* ... */ }
</style>

上述代码将会编译成:

.langpz[data-v-f3f3eg9] .b { /* ... */ }

如果你用的是SCSS或者LESS需要把 >>> 替换成 /deep/

如果组件的样式是js动态生成的,深度作用选择器前面就不要跟class了。

我的博客和GitHub地址

github.com/lanpangzhi

blog.langpz.com

参考

vue-loader.vuejs.org/zh/guide/sc…