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;
}