Button状态

antd Button按钮，自定 type样式

const style = { textAlign: 'center', width: 60, fontSize: 12 };
function ButtonStatus({ label, color, icon }) {
  return (
    <div style={style}>
      <Button shape='circle' type={color} icon={icon} className='mb8' />
      <p>{label}</p>
    </div>
  );
}

icon

const ButtonStatus = {
  0: { label: '成功', color: 'success', icon: 'check' },
  1: { label: '失败', color: 'danger', icon: 'close' },
  2: { label: '进行中', color: 'process', icon: 'clock-circle' },
};

less

重写 Button组件的样式，自定义 type类型的 css样式

.ant-btn.ant-btn-process,
.ant-btn.ant-btn-process:hover,
.ant-btn.ant-btn-process:focus {
  border-color: #1890ff;
  background-color: #1890ff;
  color: #fff;
}
.ant-btn.ant-btn-success,
.ant-btn.ant-btn-success:hover,
.ant-btn.ant-btn-success:focus {
  border-color: #52c41a;
  background-color: #52c41a;
  color: #fff;
}