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

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

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

  • 此時，子組件里面的文字顏色也變?yōu)榧t色了；

解決

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

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容