如何修改Ant Design 弹窗组件的样式2

要修改 Ant Design 弹窗组件的样式，可以通过以下方法：

1. 使用 className 属性为弹窗组件添加自定义类名，然后在 CSS 文件中编写对应的样式规则。

import React from 'react';
import { Modal } from 'antd';
import './customModalStyle.less';

const CustomModal = (props) => {
  return (
    <Modal className="custom-modal" {...props}>
      {props.children}
    </Modal>
  );
};

export default CustomModal;

在 customModalStyle.less 文件中编写样式：

.custom-modal {
  // 编写自定义样式
}

2. 使用 Ant Design 的 style 属性直接设置内联样式。

import React from 'react';
import { Modal } from 'antd';

const CustomModal = (props) => {
  return (
    <Modal style={{ /* 自定义样式 */ }} {...props}>
      {props.children}
    </Modal>
  );
};

export default CustomModal;

3. 使用 Ant Design 的 wrapClassName 属性为弹窗的外层容器添加自定义类名，然后在 CSS 文件中编写对应的样式规则。

import React from 'react';
import { Modal } from 'antd';
import './customModalStyle.less';

const CustomModal = (props) => {
  return (
    <Modal wrapClassName="custom-modal-wrap" {...props}>
      {props.children}
    </Modal>
  );
};

export default CustomModal;

在 customModalStyle.less 文件中编写样式：

.custom-modal-wrap {
  // 编写自定义样式
}