Vue3 Teleport: 如何修改父组件样式 - :deep() 穿透选择器局限性

使用 :deep() 穿透选择器可以修改子组件的样式，但无法修改组件的父组件样式。这是因为 :deep() 穿透选择器只能向下查找子组件，无法向上查找父组件。

如果需要修改父组件样式，可以考虑使用更具体的选择器或者在父组件中使用 scoped 样式。

例如，在父组件中使用 scoped 样式：

<template>
  <div>
    <teleport to='body'>
      <div class='modal'>Modal content</div>
    </teleport>
  </div>
</template>

<style scoped>
.modal {
  background-color: red;
}
</style>

或者使用更具体的选择器：

<template>
  <div class='parent'>
    <teleport to='body'>
      <div class='modal'>Modal content</div>
    </teleport>
  </div>
</template>

<style>
.parent .modal {
  background-color: red;
}
</style>