模态框按钮修改样式
由于,模态框底部按钮要求左右对调,用 Modal的footer属性又太笨重了
// 模态框底部按钮样式
.modalFooterBtn {
:global {
.ant-modal-confirm-btns,
.ant-modal-footer {
display: flex;
justify-content: flex-start;
flex-direction: row-reverse;
.ant-btn {
background-color: #e5e5e5;
color: #252525;
border-color: #e5e5e5;
min-width: 72px;
&:focus,
&:hover {
background-color: #f2f2f2;
color: #252525;
border-color: #f2f2f2;
}
}
.ant-btn-primary {
order: 0;
margin-right: 12px;
color: #fff;
background-color: #256ffc;
border-color: #256ffc;
transition: all 0.3s;
&:focus,
&:hover {
color: #fff;
background-color: #4584fc;
border-color: #4584fc;
}
}
}
}
}
.renderAddFieldSettingsModal{
.modalFooterBtn //直接在模态框类名混入这个类名就可以了
}
<Modal
title={this.AddFieldSettingsModalMap[type]}
className={style.renderAddFieldSettingsModal}
visible={true}
onOk={this.AddFieldSettingsModalOk}
okButtonProps={{loading: this.state.AddFieldSettingsModal.loading}}//确定按钮的加载效果
onCancel={this.AddFieldSettingsModalCancel}>
<div>
1111
</div>
</Modal>