vue 3.0 子组件使用了 teleport 标签,父组件使用 deep 样式穿透不生效

发布于 2022-09-12 14:01:32 字数 441 浏览 9 评论 0

子组件:

<template>
  <teleport to="body">
    <div>
      <h4>示例</h4>
    </div>
  </teleport>
</template>

父组件:

<style lang="less" scoped>
:deep(h4) {
  color: red !important;
}
</style>

组件封装过程中突然发现的这个问题,请问有什么比较好的解决方法?

具体场景:子组件是弹窗基础公共组件,所以封装使用了teleport标签,默认to指向body,在父组件引用时有时会有微调内部样式的需求。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

暖风昔人 2022-09-19 14:01:32

自问自答吧,封装个disabled属性差不多就够用了

image.png

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文