模态框

Modal 组件允许您创建对话框、弹出框、灯箱和其他强制用户在继续操作之前采取措施的元素。

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

通过阅读这篇关于最小化捆绑包大小的指南，了解两者之间的区别。

原生组件的 Props 也可用。

名称	类型	默认值	描述
children*	element	-	单个子内容元素。这个需要能够持有 ref。
open*	bool	-	如果 `true`，则组件显示。
closeAfterTransition	bool	false	当设置为 true 时，Modal 会等待嵌套的 Transition 完成后再关闭。
container	HTML 元素 \| func	-	一个 HTML 元素或返回 HTML 元素的函数。`container` 将会把 portal 子元素附加到它上面。您还可以提供一个回调，该回调在 React 布局 effect 中调用。这允许您从 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	始终将子元素保留在 DOM 中。此 prop 在 SEO 情况或您希望最大化 Modal 响应能力时很有用。
onBackdropClick	func	-	当背景幕布被点击时触发的回调。已弃用－使用带有 `reason` 参数的 `onClose` prop 来处理 `backdropClick` 事件。
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 内部每个 slot 的 props。
slots	{ backdrop?: elementType, root?: elementType }	{}	用于 Modal 内部每个 slot 的组件。可以是用于 HTML 元素的字符串或组件。请参阅下面的 Slots API 了解更多详情。

ref 被转发到根元素。

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

Slot 名称	类名	默认组件	描述
root	.base-Modal-root	`'div'`	渲染根元素的组件。
backdrop	.base-Modal-backdrop		渲染背景幕布的组件。

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

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

模态框

Modal API

导入

Props

Slots

CSS 类