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