Vue使用 element UI 修改checkbox选择框的默认颜色以及字体颜色

项目场景：

解决方案：

首先要先去掉 style lang=“scss” 里面的scoped，然后才会生效

对应修改就行

// 修改选择框颜色
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #f32823 !important;
  background-color: #f32823 !important;
}
.el-checkbox__inner:hover {
  border-color: #f32823 !important;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #f32823 !important;
}
.el-checkbox {
  color: #111;
  margin-right: 30px;
  font-size: 16px;
  margin-bottom: 18px;
}
// 修改选择框大小
.el-checkbox__inner {
  width: 16px;
  height: 16px;
}
// 修改选择label字体颜色
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #111 !important;
}
// 修改中心对号大小以及位置
.el-checkbox__inner::after {
  left: 4px;
  height: 9px;
  width: 5px;
  top: 0;
}