import {Modal,} from 'antd'; Modal.confirm({ className: 'custom-modal', title: window.language['playlist.tip'], okText: window.language['playlist.saveAsWithoutPreSave'], cancelText: window.language['playlist.preSaveThenSaveAs'], content: window.language['playlist.des5'], onOk: () => { // this.savePlaylist()(this.showAddPublishOk); this.savePlaylist(); this.setState( { saveAsModalVisible: !this.state.saveAsModalVisible }, ); }, onCancel: () => { this.setState( { saveAsModalVisible: !this.state.saveAsModalVisible }, ); } }); 确定和取消的文本太长，如何自定义确定按键和取消按键的宽高

你可以通过设置 Modal.confirm 的 okButtonProps 和 cancelButtonProps 属性来自定义确定按键和取消按键的宽高，例如：

import { Modal, Button } from 'antd';

Modal.confirm({
  className: 'custom-modal',
  title: window.language['playlist.tip'],
  content: window.language['playlist.des5'],
  okButtonProps: {
    style: {
      width: '100px',
      height: '50px',
    },
  },
  cancelButtonProps: {
    style: {
      width: '120px',
      height: '50px',
    },
  },
  onOk: () => {
    // 确认操作
  },
  onCancel: () => {
    // 取消操作
  },
});

在上面的例子中，我们通过设置 okButtonProps 和 cancelButtonProps 的 style 属性来自定义确定按键和取消按键的宽高。你可以根据需要自定义其他样式属性。

相关问题

这样设置并不生效，仍然会被下面这个属性替代：.ant-modal.custom-modal.ant-confirm-confirm .ant-modal-content .ant-modal-body .ant-confirm-body-wrapper .ant-confirm-btns .ant-btn

如果你的自定义样式无法覆盖默认样式，你可以使用 `!important` 规则来强制应用自定义样式。例如：

import { Modal, Button } from 'antd';

Modal.confirm({
  className: 'custom-modal',
  title: window.language['playlist.tip'],
  content: window.language['playlist.des5'],
  okButtonProps: {
    style: {
      width: '100px',
      height: '50px',
    },
    className: 'custom-ok-button',
  },
  cancelButtonProps: {
    style: {
      width: '120px',
      height: '50px',
    },
    className: 'custom-cancel-button',
  },
  onOk: () => {
    // 确认操作
  },
  onCancel: () => {
    // 取消操作
  },
});

然后在你的 CSS 文件中添加以下代码：

.custom-modal .custom-ok-button {
  width: 100px !important;
  height: 50px !important;
}

.custom-modal .custom-cancel-button {
  width: 120px !important;
  height: 50px !important;
}

这样就可以强制应用自定义样式了。如果你仍然无法覆盖默认样式，你可以使用更具体的 CSS 选择器来定位元素并应用自定义样式。

antd modal.confirm

antd是一款基于React的UI组件库，其中modal.confirm是其中的一个弹窗组件，用于确认操作。当用户需要执行一些敏感或重要的操作时，可以使用该组件作为确认操作的提示框。

使用方法如下：

import { Modal } from 'antd';

Modal.confirm({
  title: '确认删除该条数据吗？',
  okText: '确定',
  cancelText: '取消',
  onOk() {
    // 确认操作
  },
  onCancel() {
    // 取消操作
  },
});

其中，title为弹窗标题，okText为确认按钮文本，cancelText为取消按钮文本，onOk为确认按钮点击回调函数，onCancel为取消按钮点击回调函数。