How to solve the problem that the parent component cannot modify the style of the child component after adding scoped in Vue development

In the development of vue, we need to reference sub-components, including ui components (element, iview). But after adding scoped in the parent component, writing the style of the child component in the parent component has no effect. After removing scoped, styles can be overridden. But this will pollute the global style. In order to solve this problem, vue-loader adds a new writing method.

#demo

Parent component:

<style lang="css" scoped>

 header /deep/ .header{     
   box-shadow:0px 1px 0px 0px $white;
  }

header >>> .header{   
   box-shadow:0px 1px 0px 0px $white;
}

</style>

Child component:

<template>  
 <header>    
    <p class="header">       
    </p>   
  </header>
</template>

This way of writing and modifying the style of the child component , without polluting the global style!

Official document: Scoped CSS · vue-loader

Tips: This method is supported starting from vue-loader 11.2.0

• Remove scoped

• 2 Mix local and global styles

• 3 Use deep action selector

In development using vue, we sometimes refer to external components, including UI components (ElementUI, iview).

When the <style> tag has the scoped attribute, its CSS only applies to elements in the current component.
But after adding scoped to the parent component, the style of the parent component will not penetrate into the child component, so writing the style of the child component in the parent component has no effect.

一、去掉 scoped

在父组件的 <style> 中去掉 scoped 后，父组件中可以书写子组件的样式，但是你会担心这样会污染全局样式。 
【因为我们知道正确使用全局样式的姿势是使用一个全局的 app.css】

二、混用本地和全局样式

你可以在一个组件中同时使用有作用域和无作用域的样式：

<style>
/* 全局样式 */
</style>