0
点赞
收藏
分享

微信扫一扫

vue scoped父组件影响子组件样式

菜头粿子园 2021-09-24 阅读 52
一点点
  • vue里面给style标签添加scoped属性之后,css只会作用于当前组件中的元素。

  • 但是这次项目里面出现了父组件的样式影响了子组件的样式。
    父组件
    <style scoped> .test{color: #f00;} </style>
    子组件
    <template> <div class="test"> 测试父组件样式影响子组件 </div> </template>

  • 此时,子组件里面的文字颜色也变为红色了;

解决

Vue Loader里面有一句
使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式

举报

相关推荐

0 条评论