react->Antd->Table调整checkbox默认样式
checkbox默认不展示,hover此行时,出现checkbox,选中后不消失:
hover前,设置透明边框;
hover时,checkbox出现
选中后
代码块:
.ant-checkbox {
.ant-checkbox-inner {
border: transparent;
}
}
.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-indeterminate .ant-checkbox-inner {
border: 2px solid #3a89fe;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td
.ant-checkbox-inner {
border: 2px solid #3a89fe;
}
表头checkbox
代码块
此处修改边框颜色
.ant-table-header {
.ant-checkbox {
.ant-checkbox-inner {
border: 2px solid rgba(255, 255, 255, 0.10196);
}
}
}
禁用的checkbox
代码块
此处修改背景色设为透明
.ant-checkbox-disabled .ant-checkbox-inner {
background-color: transparent;
}