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

子组件:

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

父组件:

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

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

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

阅读 103
评论
    1 个回答

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

    image.png

      撰写回答

      登录后参与交流、获取后续更新提醒

      相似问题
      推荐文章