问题描述

原型设置的多项选择是选中框的背景颜色白色，钩子的颜色黑色的，而现有的是如下图所示，所以只能修改antd的默认样式。

解决方案

因为antd的checkbox组件的选中框里面的透明的钩子，是通过设置底部边框和右边框的颜色再旋转得到的钩子，所以设置底部边框和右边框的样式就可以修改钩子的样式，代码如下：

.preview {
  :global{
    .ant-checkbox-inner {
      //修改边框的颜色
      border: 1px solid #000 !important;
    }
    .ant-checkbox-checked .ant-checkbox-inner {
      //修改选中框的背景颜色
      background-color: #fff !important; /* 将背景颜色修改为白色 */
      //修改边框颜色
      border-color: #000 !important; /* 将边框颜色修改为黑色 */
    }
    .ant-checkbox-checked .ant-checkbox-inner::after {
      //antd的checkbox组件的选中框里面的透明的钩子，是通过设置底部边框和右边框的颜色再旋转得到的钩子，
      // 所以设置底部边框和右边框的样式就可以修改钩子的样式
      border-bottom: 2px solid #000;
      border-right: 2px solid #000;
    }
  }
}

最后就实现需要的效果，如下图：