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

• vue里面给style标签添加scoped属性之后，css只会作用于当前组件中的元素。

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

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

解决

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

 

转自：https://www.jianshu.com/p/a82a4a1c08f8