尝试使用 okButtonProps 和 cancelButtonProps 在 Antd 模态中翻转 OK 和 Cancel 按钮的位置以获得按钮位置

Posted 2023-02-22

【中文标题】尝试使用 okButtonProps 和 cancelButtonProps 在 Antd 模态中翻转 OK 和 Cancel 按钮的位置以获得按钮位置

【英文标题】：Trying to flip the position of the OK and Cancel buttons inside an Antd modal using okButtonProps and cancelButtonProps for button position

【发布时间】：2019-12-14 05:42:07

【问题描述】：

我正在为一个项目使用 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);

【参考方案1】：

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

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

已编辑 sn-p 解决方案：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 的一种方法。

【参考方案2】：

Modal.method() 非常有限，所以我会构建自定义模态using footer property。

无论如何，您可以只翻转按钮或编辑 CSS 类，如 @Rikin mentioned：

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');
    
  );

【参考方案3】：

如果您想将图标颜色更改为红色，那么以下答案将有所帮助............ Modal.confirm 将始终为黄色。为了将颜色更改为红色，您需要将颜色作为红色传递给图标属性。请参考以下代码。

import  CloseCircleFilled  from '@ant-design/icons';
...
...
 Modal.confirm(
    title: 'Confirm Title',
    content: 'ABC.....',
    okText:'OK',  
    icon: <CloseCircleFilled style= color: '#ff2a00'  />,
    onOk: () => 
      // code to be implemented
    ,
  );

上述解决方案对我有用。