带有标签的 antd 复选框

【问题标题】：antd checkbox with label inside带有标签的 antd 复选框
【发布时间】：2021-09-16 14:56:38
【问题描述】：

我找不到在 antd 复选框内放置标签的方法，删除勾号并将其替换为标签，在本例中为字母，如图所示antd checkbox customized tick

也许有人已经经历过同样的案例，可以告诉我在哪里审查。

谢谢，干杯！

【问题讨论】：

标签： antd

【解决方案1】：

这是我如何设法匹配要求的：

const StyledCheckBox = styled(Checkbox)`
  &.ant-checkbox-wrapper {
    width: 32px;
    height: 32px;

    justify-content: center;
    align-items: center;

    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
  }

  &.ant-checkbox-wrapper-checked {
    background-color: #1890ff;
    color: #fff;
  }

  .ant-checkbox {
    display: none;
  }
`;

然后将复选框分组

<Checkbox.Group style={{ width: "100%" }}>
              <Row>
                <Col span={4}>
                  <MyCheckbox value="1">L</MyCheckbox>
                </Col>
                <Col span={4}>
                  <MyCheckbox value="2">M</MyCheckbox>
                </Col>
                <Col span={4}>
                  <MyCheckbox value="3">M</MyCheckbox>
                </Col>
              </Row>
            </Checkbox.Group>

【讨论】：