elementUi el-checkbox如何更改样式

Element UI的`el-checkbox`组件提供了一定程度的自定义样式选项。如果你想更改`el-checkbox`的外观，你可以通过CSS覆盖默认样式，或者使用它的`class`属性添加自定义类。以下是两个常见的方法：

1. **通过CSS覆盖**:
- 使用`:is()`伪类选择器，它会匹配元素的所有状态，如`:is-checked`表示选中状态：

     .el-checkbox.is-checked {
         /* 这里设置选中的checkbox样式 */
         color: #f00; /* 更改文本颜色为红色 */
         border-color: #f00; /* 或者更改边框颜色 */
     }
     
     .el-checkbox__input.is-checked + .el-checkbox__label {
         background: #eee; /* 可以改变背景色 */
     }

2. **通过`class`属性添加自定义样式**:
当你需要动态地切换样式时，可以给`el-checkbox`添加自定义类名，并在JavaScript中控制这个类名的显示：

   <el-checkbox v-bind:class="{ customClass: isChecked }" @change="handleChange">Checkbox</el-checkbox>
   

然后在你的样式表中定义`.customClass`规则：

   .customClass {
       /* 设置自定义样式的CSS规则 */
       font-weight: bold;
       cursor: pointer;
   }

在`handleChange`函数中：

   methods: {
     handleChange(value) {
       this.isChecked = value;
     }
   },

这样，当`isChecked`为`true`时，`customClass`就会应用到`el-checkbox`上。