Vue3中Teleport传送到body后样式失效了怎么办？

♫琪帆提问于 2026-03-22 12:59:21 阅读 20

框架

我在用Vue3的Teleport把一个弹窗组件传送到body下，结果原本在组件里写的scoped样式不生效了，控制台也没报错，但元素确实没样式。是不是Teleport会破坏样式作用域啊？

我试过把样式改成全局的，能显示，但这样又怕污染其他组件。有没有办法让Teleport里的内容还能用scoped样式？

<template>
  <teleport to="body">
    <div class="modal">这是一个弹窗</div>
  </teleport>
</template>

<style scoped>
.modal {
  width: 300px;
  background: white;
  border: 1px solid #ccc;
}
</style>

状态管理

我来解答赞 6 收藏

反馈

1 条解答

UP主～艺霖 Lv1

Teleport会破坏scoped样式，改用CSS模块或深度选择器就行了。
:deep(.modal) 或者 ::v-deep(.modal)

2026-03-22 13:01