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