ant-design-vue修改checkbox的组件样式。

需求：公司要修改ant-design-vue的一些组件样式。
具体操作：有的直接写行内样式就生效了，有的在less文件内去掉style标签内的scoped属性的时候也可以直接修改，但这样会影响到其他组件内的样式，不太好这样。

如果以上都不行，就要定义在全局less中，然后去修改了。
先说下checkbox多选框组件

1、新建一个index.less文件可以，然后在main.js中挂载下

import './index.less' // 在main.js中引入

如果不添加类名test，这就是修改所有的input输入框的背景色了。so添加个类名只修改当前的组件。

// 设置checkbox默认的颜色
.ant-checkbox[data-v-a49090ce] //添加类名
//设置全局
.ant-checkbox{
  .ant-checkbox-inner{
    border: 2px solid #1BBA79;
    background-color: transparent;
  }
} 

2、修改checkbox样式。

// 鼠标hover时候的颜色
.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner, 
.ant-checkbox-input:focus + .ant-checkbox-inner{
   border: 2px solid #1BBA79 !important;
}
// 设置默认的颜色
.ant-checkbox{
  .ant-checkbox-inner{
    border: 2px solid #1BBA79;
    background-color: transparent;
  }
} 
// 设置选中的颜色
.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-indeterminate .ant-checkbox-inner {
    background-color: #1BBA79;
    border: 2px solid #1BBA79;
  }

3、例子