Element UI组件中el-checkbox组件样式的修改

问题描述：

Element UI组件仅提供了按钮形式的 Checkbox 激活时的文本颜色修改的属性(text-color)以及激活时的填充色和边框色的修改属性（fill)，非按钮形式的如何修改这些样式呢?

---

解决方案：

提示：直接修改CSS属性，相关代码如下：

---

<template lang="pug">
  .demo-checkbox
    el-checkbox(
      v-model="checked"
      text-color="#000"
    ) 相关协议或者条款
</template>

<script>
  export default {
    data() {
      return {
        checked: true
      };
    }
  };
</script>

<style lang="scss">
.demo-checkbox {
    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #8c8c8c;
    }
    .el-checkbox .el-checkbox__label {
      color:#8c8c8c;
      font-size: 14px;
      line-height: 22px;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      border-color: lightgreen;
      background-color:lightgreen;
    }
    .el-checkbox__input.is-focus .el-checkbox__inner{
      border-color: lightgreen;
    }
    .el-checkbox__inner:hover {
      border-color: lightgreen;
    }
  }
</style>

---

最终效果

注意事项

我在写style样式的时候并没有加scoped属性，有时候加了该属性修改样式的时候不生效，要用到样式穿透，样式穿透的方法：

• css 使用 >>>
• less 使用 /deep/
• scss 使用 ::v-deep