【ant design 坑】关于Checkbox多选框改变框的大小问题

组件用的是ant design的Checkbox
根据项目需求，要把多选框变大。
但是看了ant design 官网的Checkbox，没有一个属性可以改变Checkbox的大小。

如何实现改变大小：

思路——
想通过改变checkbox的组件样式，来改变框的大小，所以要引用less文件来改变样式，
只改变单个页面的样式用className={style.FcheckChecked}， 因为修改了组件的默认样式，但是也会修改全局的样式，为了避免污染全局样式
代码

js页面：

import {  Checkbox as FCheck } from 'antd';
import style from './index.less'
....
  <div style={{ textAlign: 'right' }} className={style.FcheckChecked} >
      <FCheck onChange={this.handleisChecked} 
               checked={this.state.isChecked} >
               复选框
      </FCheck>
   </div>
                ......

less页面
//避免全局污染：.FcheckChecked

.FcheckChecked
:global{
    .ant-checkbox-inner {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 16px;
    height: 16px;
    direction: ltr;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    border-collapse: separate;
    transition: all 0.3s;
    width: 20px;
    height: 20px
}
//下面部分不能省，会导致，虽然改变了框大小但是无法勾中复选框
.ant-checkbox-checked .ant-checkbox-inner {
    background-color: #1890ff;
    border-color: #1890ff;
}
}