如何为确认模态框（Modal）内的按钮添加marginRight样式？

你可以直接借助Ant Design Modal.confirm提供的okButtonProps和cancelButtonProps配置项，给目标按钮传入style属性来设置marginRight。

具体修改后的代码如下：

const onGalleryFileRemove = (_file: UploadFile<any>) => {
    const { confirm } = Modal

    return new Promise<boolean>((resolve, reject) => {
        confirm({
            title: <h3 style={{ marginLeft: '3rem' }}>{formatMessage({ id: 'confirmationDeletePicture' })}</h3>,
            icon: <ExclamationCircleOutlined style={{ float: 'right' }} />,
            // 给确认按钮添加右侧间距
            okButtonProps: {
                style: { marginRight: '12px' }
            },
            // 如果需要给取消按钮加样式，也可以在这里配置
            cancelButtonProps: {
                // style: { marginRight: '8px' }
            },
            onOk: () => {
                resolve(true)
            },
            onCancel: () => {
                reject(true)
            }
        })
    });
};

补充说明 #

• 这两个配置项支持传递Ant Design Button组件的所有属性，不止是style，还包括disabled、size等。
• 若要调整两个按钮的间距，通常给左侧按钮（默认是取消按钮）设置marginRight，或给右侧确认按钮设置marginLeft，数值可根据UI需求自行调整。
• 不建议直接全局覆盖Modal的按钮类，避免影响项目中其他Modal组件的样式。

内容的提问来源于stack exchange，提问作者Hiba Youssef