模态框按钮修改样式

由于,模态框底部按钮要求左右对调,用 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>