深度修改ElementUI样式，付内部组件的名字

引例

这里的checkbox的字体太大了，想要修改：

样式代码

<el-form-item class="check-item">
  <el-checkbox 
               v-model="agreeRules" 
               class="agree-rules-checkbox" 
               size="mini">同意EZPY云服务用户协议
  </el-checkbox>
</el-form-item>

普通修改方法

此方法经测试，只能修改字体颜色，无法改变大小

  .agree-rules-checkbox{
    color: #999;
    font-size: 10px;
    height: 12px;
    line-height: 12px;
  }

深度修改

在网上查阅了好久，推荐使用 >>> 进行深度访问要修改的子组件

修改内部checkbox颜色

  .agree-rules-checkbox >>> .el-checkbox__inner {
    background-color: red;
  }

修改标签字体大小

 .agree-rules-checkbox >>> .el-checkbox__label{
   color: #999;
   font-size: xx-small;
 }

去哪里去找这些内部组件的名字？

在官网查了半天深度修改，根本没有提到内部子组件。
蓦然回首，打开F12, 例例在目，难怪官网没提。
注意 __inner前面的下划线 __ 有两个!