vue 父组件修改子组件样式

前言

vue的style中的scoped是CSS规范，是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。
vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素，它是通过使用PostCSS来改变以下内容实现的。

解决办法

举例：

<template>
    <div class="box">
        //el-ui 修改
        <el-switch></el-switch>
        //自己组件的修改
        <self-cmp class="self"></self-cmp>
    </div>
</template>

解决办法：
1.混合使用全局属性和局部属性

<style>
/* global styles */
/*一定要有最外层容器包裹,以免污染全局*/
.box{
   
}
</style>
<style scoped>
/* local styles */
</style>

2.深度选择器

<style scoped>
  .self /deep/ .name{ 
      //第一种写法
  }
  .self >>> .name{  
      //二种写法
  }
</style>

一些预处理程序，例如sass不能解析>>>属性，这种情况下可以用deep，它是>>>的别名，工作原理相同。