vue（scoped）修改UI库组件样式

vue修改UI库组件样式

在工做中常常会遇见设计稿和UI库的组件样式不同，在style标签加了scoped，就没法修改UI组件的样式了，由于当前组件样式只应用到这个组件上。

深度做用选择器

若是你想修改组件的样式就能够使用 >>> 操做符：

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

上述代码将会编译成：

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

若是你用的是SCSS或者LESS须要把 >>> 替换成 /deep/
<style scoped>
.langpz /deep/ .b { / ... / }
</style>

若是组件的样式是js动态生成的，深度做用选择器前面就不要跟class了。

# 个人博客和GitHub地址
https://github.com/lanpangzhi

http://blog.langpz.com

参考

https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B7%E7%94%A8%E6%9C%AC%E5%9C%B0%E5%92%8C%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F