尝试使用 okButtonProps 和 cancelButtonProps 来翻转 Antd 模式中的 OK 和 Cancel 按钮的位置作为按钮位置

Question

我正在为一个项目使用 Antd 的 Modal 组件，我正在尝试对其进行自定义。

我需要翻转ok和cancel按钮的位置，使ok按钮在左侧，而cancel在右侧。

我也在尝试将图标颜色更改为红色。

我查看了某人刚刚为 Antd 项目添加的PR以添加此必需的功能，但我无法真正描述我需要使用什么道具来更改定位。

到目前为止，我有一个 CodeSandbox，其中包含我的进度

import React from "react";
import ReactDOM from "react-dom";
import { Modal, Button } from "antd";
import "antd/dist/antd.css";

import "./styles.css";

function showConfirm() {
  Modal.confirm({
    title: "Do you Want to delete these items?",
    content: "Some descriptions",
    iconType: "close-circle",
    okButtonProps: {},
    cancelButtonProps: {},
    onOk() {
      console.log("OK");
    },
    onCancel() {
      console.log("Cancel");
    }
  });
}

function App() {
  return (
    <div className="App">
      <h1>Hello Modal</h1>
      <Button onClick={showConfirm}>Click For Modal</Button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

Modal.method()非常有限，所以我会使用footerproperty构建自定义模式。

无论如何，你只需翻转按钮或编辑 CSS 类，就像@Rikin 提到的：

function showConfirm() {
  Modal.confirm({
    title: 'Do you Want to delete these items?',
    content: 'Some descriptions',
    iconType: 'close-circle',
    okText: 'Cancel',
    cancelText: 'OK',
    okButtonProps: {
      type: 'default'
    },
    cancelButtonProps: {
      type: 'primary'
    },
    onOk() {
      console.log('Cancel');
    },
    onCancel() {
      console.log('OK');
    }
  });
}

Answer 2

尽管在我查看代码库时提到了 PR，但 PR 似乎没有任何选项可以满足它的需求。PR的作者可能不理解要求。您可以在评论中提及未解决，以便它们重新打开。

在此之前，您可以实施的可能解决方案：

编辑片段解决方案：https : //codesandbox.io/s/epic-wave-p69yt

有一个className属性可用作您可以传递给 Modal 的道具，看不到任何直接影响 Modal 中按钮位置的选项。

我在组件中添加了这个属性

className: "my-custom-class",

并在styles.css中添加了以下CSS规则：

.my-custom-class .ant-modal-confirm-btns .ant-btn{
  float: right;
  margin-left: 10px;
}

您可以根据需要进行优化。这只是解决使用 CSS 影响模态的一种方法。