vue deep

2022-01-05

vue裡的css deep

在vue中我們會想要把css控制在某個組件裡面會加上scoped但是這樣只會作用於當前組件，裡面的子組件是不會被影響的，如果我們這時候想要子組件能吃到樣式的話就要使用deep。

<style lang="scss" scoped></style>

vue2寫法

#sass
::v-deep .child-class {
    background-color: #000;
}
#not sass
>>> .child-class {
    background-color: #000;
}

vue3寫法

::v-deep(.child-class) {
    background-color: #000;
}

參考