改變Vue sub component樣式

相信元件帶給大家的好處不言而喻，但使用上總是有一些不方便之處，例如三方的元件樣式我能否調成自己喜歡的?我自己的元件在不同情境下樣式能否不一樣?難道最終都難逃考比爬斯特，重新寫一個的命運嗎?

小編的任務就是盡可能幫各位提早下班，第一個問題，我們可以寫個全域css去改變他

先假設我們的子元件長這樣

// hello.vue

<div class="component-hello">

  hello

</div>

<style scoped>

  .component-hello {

    color: red

  }

</style>

父元件長這樣

// App.vue

<div class="app">

  <hello />

</div>

<style>

  .app .component-hello {

    color: blue

  }

</style>

在先不考慮css分數的情況下，這樣寫原則上就可以覆蓋component裡面的樣式。

雖然一般三方class寫都得不錯，不太會有重複的情況，但css汙染在我心目中跟watch一樣危險，有很多不可控的因素，所謂的不可控，所謂的黑魔法，就是當下可能會覺得很爽，一個禮拜之後就會變成導致你加班的原因，且一個不小心就會演變成泥沼戰(就是比誰宣告比較兇)，所以能不要互相汙染、互相傷害就不要去做這種事，能寫sooped就給他用力寫，為這社會帶來一絲和諧吧！

然而你會發現當你加上了scoped，你原本吃的到css一夕之間的突然都吃不到了，原因是因為scoped會為該component的所有tag注入一個唯一的屬性(亂數產生)，但卻不會為子component注入該屬性，所以導致子component吃不到上層scoped的css。那這問題怎麼要解呢？

這就是今天寫這篇主題的目的：那就是使用v-deep，用法很簡單如下。

// App.vue

<div class="app">

  <hello />

</div>

<style scoped>

  .app /deep/ .component-hello {

    color: blue

  }

</style>

這樣就可以控制在App.vue下的component-hello顏色才會是藍色，這樣也同時解決了我們上述的第二個問題，同一個元件在不同class下可以有不同樣式就是這樣來的。

大部分語言也可以簡寫成如下，我以stylus為例

<style lang="stylus" scoped>

  .app >>> .component-hello 

    color blue

</style>

scss或sass語言也可以簡寫成如下

<style lang="stylus" scoped>

  .app ::deep .component-hello 

    color blue

</style>

打完收工下班！