在開發Vue時,經常遇到無法修改,外部導入的組件的樣式問題。原因就在於,我把每個style
都加了一個 scoped
的作用符
那麼怎麼解決這個問題呢:
- 不使用
scoped
這個作用符 - 使用vue的深度選擇器
什麼是深度選擇器呢?
當 <style>
標籤有 scoped
屬性時,它的 CSS 只作用於當前組件中的元素。這類似於 Shadow DOM 中的樣式封裝
如果你希望 scoped
樣式中的一個選擇器能夠作用得“更深”,例如影響子組件,你可以使用 深度選擇器
怎麼使用 深度選擇器
- 原生的CSS:
>>>
.a >>> .b { /* ... */ }
- less預處理器:
/deep/
/deep/ .dh-button:first-child{
margin-right: 20px;
}
- scss預處理器:
::v-deep
::v-deep .dh-button:first-child{
margin-right: 20px;
}