vue3 teleport的元素使用deep穿透无法修改样式

在使用 Vue3 Teleport 元素时，如果想要修改穿透到的元素的样式，可以尝试以下方法：

使用 ::v-deep 代替 /deep/ 或者 >>>，因为 /deep/ 和 >>> 已经被废弃了。
如果使用了 scoped 样式，可以尝试使用 /deep/ 或者 >>>，但是需要注意，这样会导致样式的全局污染。
在 Teleport 的目标元素上添加 class，然后使用这个 class 来修改样式，这样不会影响其他的元素。

例如：

<template>
  <div>
    <button @click="showDialog = true">打开弹窗</button>
    <teleport to="body">
      <div v-if="showDialog" class="dialog">
        <p>这是弹窗的内容</p>
        <button @click="showDialog = false">关闭弹窗</button>
      </div>
    </teleport>
  </div>
</template>

<style scoped>
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
}
</style>

在这个例子中，我们使用了 scoped 样式，并且在 Teleport 的目标元素上添加了一个 class，然后在样式中使用这个 class 来修改弹窗的样式，这样就不会影响其他的元素了。