模态框API

React 模态框组件的 API 参考文档。了解此导出模块的属性、CSS 和其他 API。

演示

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

模态框

导入

import Modal from '@mui/joy/Modal';
// or
import { Modal } from '@mui/joy';

阅读这篇关于最小化包大小的指南，了解它们之间的区别。

属性

原生组件的属性也可用。

名称	类型	默认值	描述
children*	元素	-	单个子内容元素。这需要能够容纳 ref。
open*	布尔值	-	如果为 `true`，则显示组件。
component	元素类型	-	用于根节点的组件。可以使用字符串来使用 HTML 元素或组件。
container	HTML 元素 \| 函数	-	一个 HTML 元素或返回一个 HTML 元素的函数。`container` 将会附加 portal children。您还可以提供一个回调函数，该函数在 React 布局 effect 中被调用。这允许您从 ref 设置容器，并使服务器端渲染成为可能。默认情况下，它使用顶层文档对象的 body，因此在大多数情况下它只是 `document.body`。
disableAutoFocus	布尔值	false	如果为 `true`，模态框在打开时不会自动将焦点转移到自身，并在关闭时将其替换为最后聚焦的元素。这也适用于任何具有 `disableAutoFocus` 属性的模态框子组件。通常，永远不应将其设置为 `true`，因为它会使模态框对辅助技术（如屏幕阅读器）的可访问性降低。
disableEnforceFocus	布尔值	false	如果为 `true`，模态框在打开时不会阻止焦点离开模态框。通常，永远不应将其设置为 `true`，因为它会使模态框对辅助技术（如屏幕阅读器）的可访问性降低。
disableEscapeKeyDown	布尔值	false	如果为 `true`，则按 escape 键不会触发 `onClose` 回调。
disablePortal	布尔值	false	`children` 将位于父组件的 DOM 层次结构下。
disableRestoreFocus	布尔值	false	如果为 `true`，模态框在隐藏或卸载后不会将焦点恢复到先前聚焦的元素。
disableScrollLock	布尔值	false	禁用滚动锁定行为。
hideBackdrop	布尔值	false	如果为 `true`，则不渲染背景幕布。
keepMounted	布尔值	false	始终将 children 保留在 DOM 中。此属性在 SEO 情况或当您想要最大化 Modal 的响应性时很有用。
onClose	函数	-	当组件请求关闭时触发的回调函数。`reason` 参数可以选择性地用于控制对 `onClose` 的响应。签名:`function(event: object, reason: string) => void` `event` 回调的事件源。 `reason` 可以是：`"escapeKeyDown"`、`"backdropClick"`、`"closeClick"`。
slotProps	{ backdrop?: 函数 \| 对象, root?: 函数 \| 对象 }	{}	用于每个插槽内部的属性。
slots	{ backdrop?: 元素类型, root?: 元素类型 }	{}	用于每个插槽内部的组件。有关更多详细信息，请参阅下面的插槽 API。
sx	Array<函数 \| 对象 \| 布尔值> \| 函数 \| 对象	-	允许定义系统覆盖以及其他 CSS 样式的系统属性。有关更多详细信息，请参阅 `sx` 页面。

ref 被转发到根元素。

插槽

要了解如何自定义插槽，请查看“覆盖组件结构”指南。

插槽名称	类名	默认组件	描述
root	.MuiModal-root	`'div'`	渲染根组件的组件。
backdrop	.MuiModal-backdrop	`'div'`	渲染背景幕布的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当特定状态被触发时，它们会被应用到组件的插槽。

类名	规则名称	描述
.MuiModal-hidden	hidden	当 open 为 false 时，应用于根元素的类名。

您可以使用以下自定义选项之一来覆盖组件的样式

使用全局类名。
使用作为自定义主题中组件的 styleOverrides 属性一部分的规则名称。

源代码

如果您在此页面中找不到所需信息，请考虑查看组件的实现以获取更多详细信息。