vue中修改第三方組件的樣式不生效

問題

在使用element-ui時，有時候想要修改組件內的樣式，但不成功，例如

<div class="test">
    <el-button>按鈕</el-button>
</div>

<style lang="less" scoped>
.test{
  .el-button span{
    background:red;
  }
}
</style>

以上對.el-button span的樣式不生效

問題的緣由

想要找到解決方案，咱們先來看看不生效的緣由。
1）首先，scoped是如何實現局部樣式的？
查看vu-loader文檔，根據文檔能夠知道，當 <style> 標籤有 scoped 屬性時，會對組件內的元素加上一個相似於data-v-f3f3eg9的獨特標籤，組件內的樣式只會對帶有這個標籤的dom元素生效，所以加上scoped後，組件內的樣式不會影響組件外。
2）那scoped爲何對第三方子組件內的dom元素不生效？
文檔中提到

仔細閱讀這句話，也就是說採用scoped後，對組件A內採用的子組件，只會對其根元素加上組件A的獨特標籤，所以對子組件的根元素改變樣式能生效，而對非根元素是不生效的。所以上面的例子若是改成對根元素.el-button修改樣式，就會生效

<style lang="less" scoped>
.test{
  .el-button{
    background:red;
  }
}
</style>

能夠看下具體的dom元素，如圖

上圖中data-v-5752faac是當前組件test的獨特標籤（其餘是父元素帶上的，這裏忽略），能夠看到子組件el-button的根元素帶上了此標籤，而非根元素span沒帶上，所以對span的修改是不生效的，此時若是手動在span元素上加上data-v-5752faac，會發現樣式生效
3）不只限於第三方組件
從上面的分析來看，其實不只限於第三方組件，任何採用到的子組件，只要是想修改子組件的非根元素都是不生效的

解決方案

• 【方案一】加上一個非scoped樣式
  根據文檔可知，vue能夠混用本地和全局樣式，所以對子組件的非根元素樣式修改，能夠單獨放在一個非 scoped 樣式中

<style>
.test{
  .el-button span{
    background:red;
  }
}
</style>

<style scoped>
/* 本地樣式 */
</style>

• 【方案二】採用/deep/
  加上/deep/，組件的樣式能夠滲透到子組件相應的元素上

<style lang="less" scoped>
.test{
  /deep/ .el-button span{
    background:red;
  }
}
</style>

參考文檔
vu-loader文檔