vue scoped父組件影響子組件樣式

• vue里面給style標簽添加scoped屬性之后，css只會作用於當前組件中的元素。

• 但是這次項目里面出現了父組件的樣式影響了子組件的樣式。
  父組件
  <style scoped> .test{color: #f00;} </style>
  子組件
  <template> <div class="test"> 測試父組件樣式影響子組件 </div> </template>

• 此時，子組件里面的文字顏色也變為紅色了；

解決

Vue Loader里面有一句
使用 scoped 后，父組件的樣式將不會滲透到子組件中。不過一個子組件的根節點會同時受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響。這樣設計是為了讓父組件可以從布局的角度出發，調整其子組件根元素的樣式

 

轉自：https://www.jianshu.com/p/a82a4a1c08f8