antd 复选框里面有标签

Question

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

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

谢谢，干杯！

Answer 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>

antd 复选框里面有标签

antd checkbox with label inside

antd