Class name applied to {{nodeName}} if {{conditions}}.

Modal is a lower-level construct that is leveraged by the following components:
<ul>
<li><a href="https://mui.org.cn/material-ui/api/dialog/">Dialog</a></li>
<li><a href="https://mui.org.cn/material-ui/api/drawer/">Drawer</a></li>
<li><a href="https://mui.org.cn/material-ui/api/menu/">Menu</a></li>
<li><a href="https://mui.org.cn/material-ui/api/popover/">Popover</a></li>
</ul>
If you are creating a modal dialog, you probably want to use the <a href="https://mui.org.cn/material-ui/api/dialog/">Dialog</a> component
rather than directly using Modal.
This component shares many concepts with <a href="https://react-bootstrap.github.io/react-overlays/#modals">react-overlays</a>.

When set to true the Modal waits until a nested Transition is completed before closing.

An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it. You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible. By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time.

If <code>true</code>, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the <code>disableAutoFocus</code> prop. Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers.

If <code>true</code>, the modal will not prevent focus from leaving the modal while open. Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers.

If <code>true</code>, hitting escape will not fire the <code>onClose</code> callback.

The <code>children</code> will be under the DOM hierarchy of the parent component.

If <code>true</code>, the modal will not restore focus to previously focused element once modal is hidden or unmounted.

If <code>true</code>, the backdrop is not rendered.

Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Modal.

Callback fired when the backdrop is clicked.

Callback fired when the component requests to be closed. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>.

A function called when a transition enters.

A function called when a transition has exited.

If <code>true</code>, the component is shown.

The props used for each slot inside the Modal.

The components used for each slot inside the Modal. Either a string to use a HTML element or a component.

Class name applied to the root element if the `Modal` has exited.

Modal

custom

bool

union

func

{ backdrop?: func &#124;&nbsp;object, root?: func &#124;&nbsp;object }

shape

{ backdrop?: elementType, root?: elementType }

root

backdrop

If <code>true</code>, the exiting transition finished (to be used for unmounting the component).

Resolver for the backdrop slot&#39;s props.

Resolver for the transition related props.

If <code>true</code>, the component&#39;s child is transition component.

If <code>true</code>, the modal is the top most one.

A ref to the component&#39;s portal DOM element.

A ref to the component&#39;s root DOM element.

useModal

React.AriaAttributes[&#39;aria-hidden&#39;]

React.ReactElement&lt;any&gt; | undefined | null

boolean

PortalProps[&#39;container&#39;]

{
  bivarianceHack(event: {}, reason: &#39;backdropClick&#39; | &#39;escapeKeyDown&#39;): void
}[&#39;bivarianceHack&#39;]

React.KeyboardEventHandler

() =&gt; void

React.Ref&lt;Element&gt;

&lt;TOther extends EventHandlers = {}&gt;(externalProps?: TOther) =&gt; UseModalBackdropSlotProps&lt;TOther&gt;

&lt;TOther extends EventHandlers = {}&gt;(externalProps?: TOther) =&gt; UseModalRootSlotProps&lt;TOther&gt;

&lt;TOther extends EventHandlers = {}&gt;(externalProps?: TOther) =&gt; { onEnter: () =&gt; void; onExited: () =&gt; void }

名称	类型	默认值	描述
children*	React.ReactElement<any> \| undefined \| null	-	单个子内容元素。
open*	boolean	-	如果为 `true`，则组件显示。
rootRef*	React.Ref<Element>	-
aria-hidden	React.AriaAttributes['aria-hidden']	-
closeAfterTransition	boolean	false	当设置为 true 时，模态框会等到嵌套的 Transition 完成后再关闭。
container	PortalProps['container']	-	一个 HTML 元素或返回 HTML 元素的函数。`container` 将会把 portal 子元素附加到它上面。您也可以提供一个回调函数，它会在 React 布局 effect 中被调用。这允许您从 ref 中设置 container，并使服务器端渲染成为可能。默认情况下，它使用顶层文档对象的 body，因此大多数时候它就是 `document.body`。
disableEscapeKeyDown	boolean	false	如果为 `true`，则按 Escape 键不会触发 `onClose` 回调。
disableScrollLock	boolean	false	禁用滚动锁定行为。
onClose	{ bivarianceHack(event: {}, reason: 'backdropClick' \| 'escapeKeyDown'): void }['bivarianceHack']	-	当组件请求关闭时触发的回调函数。`reason` 参数可以选择性地用于控制对 `onClose` 的响应。
onKeyDown	React.KeyboardEventHandler	-
onTransitionEnter	() => void	-	当过渡效果进入时调用的函数。
onTransitionExited	() => void	-	当过渡效果已退出时调用的函数。

名称	类型	描述
exited	boolean	如果为 `true`，则退出过渡效果已完成（用于卸载组件）。
getBackdropProps	<TOther extends EventHandlers = {}>(externalProps?: TOther) => UseModalBackdropSlotProps<TOther>	背景幕槽 props 的解析器。
getRootProps	<TOther extends EventHandlers = {}>(externalProps?: TOther) => UseModalRootSlotProps<TOther>	根槽 props 的解析器。
getTransitionProps	<TOther extends EventHandlers = {}>(externalProps?: TOther) => { onEnter: () => void; onExited: () => void }	与过渡效果相关的 props 的解析器。
hasTransition	boolean	如果为 `true`，则组件的子组件是过渡组件。
isTopModal	() => boolean	如果为 `true`，则该模态框是最顶层的模态框。
portalRef	React.RefCallback<Element> \| null	组件 portal DOM 元素的 ref。
rootRef	React.RefCallback<Element> \| null	组件根 DOM 元素的 ref。

模态框

useModal API

导入

参数

返回值