通常情況下拙徽,我們寫樣式穿透都是用 >>>
彪标,或者 /deep/
<style scoped>
// 第一種常用方式
>>> class-name{}
// 第二種常用方式
/deep/ class-name{}
</style>
以上這兩種方式正常情況下使用都沒有問題概而,但在scss呼巷,less,sass等解析器中赎瑰,>>>,/deep/可能都無法使用王悍,這種情況可以采用::v-deep
,詳見 vue官方文檔乡范,關(guān)于Scoped CSS介紹
<style lang="scss" scoped>
// 第三種常用方式
::v-deep class-name{}
</style>
微信小程序上配名,有可能會(huì)出現(xiàn)用了 >>>啤咽,/deep/,::v-deep
都不行的情況渠脉,這種情況下是由于微信官方的組件樣式隔離宇整,此時(shí)可在父子組件的 data
同級(jí)設(shè)置 option,微信官方文檔解釋
export default {
options: { styleIsolation: 'shared' }
}
`styleIsolation` 選項(xiàng)從基礎(chǔ)庫版本 2.6.5 開始支持芋膘。它支持以下取值:
`isolated` 表示啟用樣式隔離鳞青,在自定義組件內(nèi)外,使用 class 指定的樣式將不會(huì)相互影響(一般情況下的默認(rèn)值)为朋;
`apply-shared` 表示頁面 wxss 樣式將影響到自定義組件臂拓,但自定義組件 wxss 中指定的樣式不會(huì)影響頁面;
`shared` 表示頁面 wxss 樣式將影響到自定義組件习寸,自定義組件 wxss 中指定的樣式也會(huì)影響頁面和其他設(shè)置了 `apply-shared` 或 `shared` 的自定義組件胶惰。(這個(gè)選項(xiàng)在插件中不可用。)