最近寫 vue 發現 :v-deep 已經棄用一段時間。實在太久沒更新資訊,看到 Stackoverflow 上面的解答,先整理下來吧!
出處: css – How do I use /deep/ or >>> or ::v-deep in Vue.js? – Stack Overflow
Vue 2.0 – 2.6
/* sass 能用 */ ::v-deep .child-class { background-color: #000; } /* sass 不能用 */ >>> .child-class { background-color: #000; }
Vue 3 (and Vue 2.7)
:deep(.child-class) { background-color: #000; }
Vue 3 的新功能
/* 可以用在 slot 裡面的內容 */ :slotted(.slot-class) { background-color: #000; } /* 設置為全域 css */ :global(.my-class) { background-color: #000; }