前端 - antd使用`<Modal/>`然后进行toggle弹起方式使用modal，请问如何定义主题呢？

Question

在使用antd/Modal的时候:

我们看到有2种方式进行modal的时候，

• 类似modal.info() 进行弹起
• 使用<Modal/>然后进行toggle弹起

我们可以知道在第一种方式中可以进行颜色主题的选择（info, warning, error）：

但是请问一下：在第二种方式下，如何进行颜色主题选择呢？

Answer 1

使用 className 和自定义 CSS： 你可以为 <Modal /> 添加一个自定义的 className，然后在 CSS 中定义相应的样式。例如：

<Modal
  visible={visible}
  onCancel={handleCancel}
  className="custom-modal"
>
  <p>Modal 内容</p>
</Modal>

然后在 CSS 文件中定义 custom-modal 的样式：

.custom-modal .ant-modal-content {
  background-color: #f0f0f0; /* 自定义背景颜色 */
}
.custom-modal .ant-modal-header {
  background-color: #ff4d4f; /* 自定义头部颜色 */
}
.custom-modal .ant-modal-title {
  color: #fff; /* 自定义标题颜色 */
}

或者使用 Ant Design 的主题系统

Answer 2

用自定义样式吧， 组件的写法应该没有提供hooks类似的info,success等的样式

Answer 3

在使用 `<Modal/>` 组件进行手动控制（toggle）弹起时，antd 并没有直接提供像 `modal.info()`, `modal.warning()`, `modal.error()` 这样的方法来指定主题颜色。不过，你可以通过自定义 CSS 样式或者利用 antd 提供的 `bodyStyle` 和 `footer` 属性来实现类似的效果。

### 方法一：使用 `bodyStyle` 和 `footer` 自定义样式

你可以在 `<Modal/>` 组件中使用 `bodyStyle` 属性来定义模态框主体部分的样式，包括背景颜色等。同时，你可以自定义 `footer` 的按钮样式来匹配你希望的主题颜色。

示例代码：

import React, { useState } from 'react';
import { Modal, Button } from 'antd';
import 'antd/dist/antd.css'; // 确保引入了 antd 的样式

const CustomThemeModal = () => {
const [isModalVisible, setIsModalVisible] = useState(false);

const showModal = () => {

setIsModalVisible(true);

};

const handleOk = () => {

setIsModalVisible(false);

};

const handleCancel = () => {

setIsModalVisible(false);

};

const customBodyStyle = {

backgroundColor: '#ffe5e6', // 例如，设置为类似 info 的背景色
padding: '24px',

};

return (

<>
  <Button type="primary" onClick={showModal}>
    Open Custom Theme Modal
  </Button>
  <Modal
    title="Custom Theme Modal"
    visible={isModalVisible}
    onOk={handleOk}
    onCancel={handleCancel}
    bodyStyle={customBodyStyle}
    footer={[
      <Button key="back" onClick={handleCancel}>
        Cancel
      </Button>,
      <Button key="submit" type="primary" onClick={handleOk} style={{ backgroundColor: '#1890ff', borderColor: '#1890ff' }}>
        OK
      </Button>,
    ]}
  >
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </Modal>
</>

);
};

export default CustomThemeModal;

### 方法二：使用 CSS 类名进行样式覆盖

另一种方法是定义一个 CSS 类名，并在 `Modal` 组件中使用 `className` 或 `wrapClassName` 属性来应用这个类名。然后，在你的 CSS 文件中定义具体的样式。

示例代码：

// 组件代码类似上面的示例，但添加 className
<Modal
title="Custom Theme Modal"
visible={isModalVisible}
onOk={handleOk}
onCancel={handleCancel}
wrapClassName="custom-modal-wrap" // 添加自定义类名
footer={[...]}

{/ 内容 /}
</Modal>

/ 在你的 CSS 文件中 /
.custom-modal-wrap .ant-modal-body {
background-color: #ffe5e6; / 自定义背景色 /
}

.custom-modal-wrap .ant-modal-footer .ant-btn-primary {
background-color: #1890ff; / 自定义按钮背景色 /
border-color: #1890ff; / 自定义按钮边框色 /
}

通过以上方法，你可以在使用 `<Modal/>` 组件时自定义模态框的主题颜色。