antd - Checkbox多选（Tab) 类型样式

Tab多选样式

解决方式

<Form.Item name="detectionIds" label="XXXX" rules={[{ required: true, message: '请选择XXXX' }]}>
  <Checkbox.Group onChange={(ids) => categoryChange(ids)} className={styles.specimenCheckbox}>
   {(detectionData || []).map((item: any, index: number) => {
     if (index === 0) item.isGray = true;
     return (
       <Checkbox
         key={item.id}
         value={item.id}
         className={item.isChoose ? styles.checkboxItemStatus : styles.checkboxItem}
         style={{ border: item.isChoose ? '1px solid #1890ff' : '' }}
       >
         <span className={styles.checkboxItemHr} />
         <div style={{ color: item.isChoose ? '#1890ff' : item?.isGray ? '#CCC' : '' }}>{item.detection.name}</div>
       </Checkbox>
   )})}
   </Checkbox.Group>
</Form.Item>

Less

.specimenCheckbox {
  :global {
    .ant-checkbox {
      display: none;
    }
    .ant-checkbox-wrapper + .ant-checkbox-wrapper {
      margin-left: 0;
      border-left: none !important;
    }
    .ant-checkbox-wrapper:first-child {
      border-radius: 2px 0 0 2px;
    }
    .ant-checkbox-wrapper:last-child {
      border-radius: 0 2px 2px 0;
    }
  }
}
.checkboxItem:not(:first-child) {
  .checkboxItemHr {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    box-sizing: content-box;
    width: 1px;
    height: 100%;
    padding: 0;
    border-left: 1px solid #d9d9d9;
  }
}
.checkboxItemStatus {
  border-left: none !important;
}
.checkboxItemStatus {
  position: relative;
  .checkboxItemHr {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    box-sizing: content-box;
    width: 1px;
    height: 100%;
    padding: 0;
    z-index: 1;
    border-left: 1px solid #1890ff;
  }
}
.checkboxItem, .checkboxItemStatus {
  border: 1px solid #d9d9d9;
  padding: 0 15px;
  height: 32px;
  line-height: 32px;
}
.checkboxItem:hover {
  color: #1890ff;
}