在使用 antd/Modal 的时候: 我们看到有2种方式进行modal的时候，类似 modal.info() 进行弹起使用 <Modal/> 然后进行toggle弹起我们可以知道在第一种方式中可以进行颜色主题的选择（info, warning, error）：但是请问一下：在第二种方式下，如何进行颜色主题选择呢？

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

AI BotBETA

在使用 `<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/>` 组件时自定义模态框的主题颜色。

2 个回答

得票最新

Frank

33518

发布于
12 月 20 日陕西

✓ 已被采纳

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

Seven

1.3k127

发布于
12 月 20 日广东

更新于
12 月 20 日

使用 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 的主题系统`

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

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

`或者使用 Ant Design 的主题系统`

你尚未登录，登录后可以

扁平化数组转换成树形?

js 如何将Key属性相同的放在同一个数组？

省市区街道数据在哪里可以下载？

在Electron中，我们想要创建特定的BrowserWindow，想要使用react组件作为BrowserWindow的内容，请问如何实现呢？

怎么识别手机号的主人变更了？

Vue项目一个报错无法找到原因?

前端页面脚本更新时，如何让用户端，使用最新脚本？