在 Vue 中,使用父組件樣式穿透到子組件通常不推薦,因為它破壞了樣式的作用域隔離,但如果你確實需要這樣做,可以使用深度選擇器。Vue 2 使用 ::v-deep,而 Vue 3 使用 /deep/ 或 ::v-deep 都可以。
以下是使用深度選擇器來修改子組件中 pre 標簽背景顏色的示例:
<!-- ParentComponent.vue -->
<template><child-component />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent}
};
</script><style>
/* Vue 2 使用 ::v-deep 修改子組件標簽pre的背景顏色 */
::v-deep .child-component pre {background-color: black;color: #fff; /* 為了確保可讀性,同時設置文字顏色為白色 */
}/* Vue 3 可以使用 /deep/ 或者 ::v-deep */
/* .child-component /deep/pre {background-color: black;color: #fff;
} */
</style>