如何在Vue3中使用parent的CSS规则来定位<teleport>内容？

Question

许多开发人员开始在他们的组件中使用<teleport>。例如primeVue中的dropdown组件，使用远程传送来选择选项，并将它们发送到正文的末尾。

虽然这给CSS目标带来了很大的问题，但我不能使用父类来确定目标，这里是一个直接的例子：

  <div class="red-container">
      <Dropdown v-model="dropSelect" :options="yesNo" optionLabel="name" optionValue="code" />
  </div>

有风格的

.red-container .option-item{
 color : red
}

这个css失败的原因很简单，因为options html不在".red-container“中，而是在主体的末尾，因为组件作者决定为它使用<teleport>，所以看起来不可能根据父类设置它的样式。

在做版本维护更新时，我在几个组件中遇到了这种行为，破坏了我所有的主题，问题是我不知道如何解决这个问题？

你如何使用父类来瞄准传送的内容CSS，这是可能的吗？

Answer 1

这个问题的来源是primeVue从3.0.2到3.7.+的迁移，其中组件“多选”“下拉”开始使用中断了css的远程通信功能，正如本问题描述中所提到的。

通过设置组件"appendTo“，PrimeVue实际上对此提出了解决方案。

<Dropdown appendTo="self"

其中设置"self“将在实际组件中移动远程传输，因此它将禁用远程传输，从而消除远程传输引起的问题。所以在编辑了40个组件之后，我可以继续:)。AppendTo也接受选择器，因此传送的内容可以自由移动到任何地方。

结论：“如果您不知道自己在做什么，请不要使用vue 3远程传输:)，如果您使用它，请确保添加组件选项以通过覆盖远程传输的'disabled‘或' to’属性来控制其行为。