ModalAPI

React Modal 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

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

Modal

导入

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

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

Modal 是一个较低级别的构造，以下组件利用了它

如果您要创建模态对话框，您可能需要使用 Dialog 组件，而不是直接使用 Modal。

此组件与 react-overlays 共享许多概念。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
children*	element	-	单个子内容元素。此需要能够容纳 ref。
open*	bool	-	如果 `true`，则显示该组件。
BackdropComponent	elementType	styled(Backdrop, { name: 'MuiModal', slot: 'Backdrop', overridesResolver: (props, styles) => { return styles.backdrop; }, })({ zIndex: -1, })	一个幕布组件。此 prop 启用自定义幕布渲染。已弃用－请改用 `slots.backdrop`。虽然此 prop 目前有效，但将在下一个主要版本中移除。
BackdropProps	object	-	应用于 `Backdrop` 元素的 Props。已弃用－请改用 `slotProps.backdrop`。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的 CSS 类 API。
closeAfterTransition	bool	false	设置为 true 时，Modal 会等到嵌套的 Transition 完成后才关闭。
component	elementType	-	用于根节点的组件。可以是用于 HTML 元素的字符串或组件。
components	{ Backdrop?: elementType, Root?: elementType }	{}	用于内部每个插槽的组件。已弃用－请改用 `slots` prop。此 prop 将在 v7 中移除。有关更多详细信息，请参阅从已弃用的 API 迁移。
componentsProps	{ backdrop?: func \| object, root?: func \| object }	{}	插槽组件的额外 props。您可以覆盖现有 props 或添加新的 props。已弃用－请改用 `slotProps` prop。此 prop 将在 v7 中移除。有关更多详细信息，请参阅从已弃用的 API 迁移。
container	HTML 元素 \| func	-	一个 HTML 元素或返回一个 HTML 元素的函数。`container` 将附加 portal children。您还可以提供一个回调，该回调在 React 布局效果中调用。这使您可以从 ref 设置容器，并且还可以实现服务器端渲染。默认情况下，它使用顶层文档对象的 body，因此大多数时候它只是 `document.body`。
disableAutoFocus	bool	false	如果 `true`，则模态框在打开时不会自动将焦点转移到自身，并在关闭时将其替换为上次聚焦的元素。这也适用于任何具有 `disableAutoFocus` prop 的模态框子元素。通常，永远不应将其设置为 `true`，因为它会降低模态框对辅助技术（如屏幕阅读器）的可访问性。
disableEnforceFocus	bool	false	如果 `true`，则模态框在打开时不会阻止焦点离开模态框。通常，永远不应将其设置为 `true`，因为它会降低模态框对辅助技术（如屏幕阅读器）的可访问性。
disableEscapeKeyDown	bool	false	如果 `true`，则按 Escape 键不会触发 `onClose` 回调。
disablePortal	bool	false	`children` 将位于父组件的 DOM 层次结构下。
disableRestoreFocus	bool	false	如果 `true`，则模态框在隐藏或卸载后不会将焦点恢复到先前聚焦的元素。
disableScrollLock	bool	false	禁用滚动锁定行为。
hideBackdrop	bool	false	如果 `true`，则不渲染幕布。
keepMounted	bool	false	始终将 children 保留在 DOM 中。此 prop 在 SEO 情况或当您想要最大化 Modal 的响应能力时很有用。
onClose	func	-	当组件请求关闭时触发的回调。`reason` 参数可以选择用于控制对 `onClose` 的响应。签名：`function(event: object, reason: string) => void` `event` 回调的事件源。 `reason` 可以是：`"escapeKeyDown"`、`"backdropClick"`。
onTransitionEnter	func	-	在过渡进入时调用的函数。
onTransitionExited	func	-	在过渡退出后调用的函数。
slotProps	{ backdrop?: func \| object, root?: func \| object }	{}	用于 Modal 内部每个插槽的 props。
slots	{ backdrop?: elementType, root?: elementType }	{}	用于 Modal 内部每个插槽的组件。可以是用于 HTML 元素的字符串或组件。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统 prop。有关更多详细信息，请参阅 `sx` 页面。

ref 被转发到根元素。

插槽

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

CSS 类

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

类名	规则名称	描述
.MuiModal-hidden	hidden	如果 `Modal` 已退出，则应用于根元素的类名。

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

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

源代码

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