父组件scoped会影响子组件

demo：问题 父组件scoped影响子组件

<template>
  <div id="app">
     <!-- 三个父组件通过class 添加样式 -->
    <div class="box"> 这是根组件</div>
    <div class="box"> 这是根组件</div>
    <div class="box"> 这是根组件</div>
     <!-- 子组件没有设置样式 -->
    <Login class="box1" />   
    <Login class="box1" />   
    <Login class="box1" />   
  </div>
</template>
//父组件加了scoped 
//问题：依然会影响到子组件
<style lang="css" scoped>
.box {
  background-color: pink;
  font-size: 50px;
}

</style>

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

解决问题 ：父组件修改样式所用的类名和子组件根节点的类名一致，导致一同被修改