ModalAPI

React Modal 組件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。

示範

如需此 React 組件的使用範例和詳細資訊，請造訪組件示範頁面

Modal

匯入

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

閱讀這份關於最小化 bundle size 的指南，以了解差異。

Props (屬性)

也提供原生組件的 Props。

名稱	類型	預設	描述
children*	element	-	單一子內容元素。這需要能夠持有 ref。
open*	bool	-	若為 `true`，則會顯示此組件。
component	elementType	-	用於根節點的組件。可以是字串（使用 HTML 元素）或組件。
container	HTML 元素 \| func	-	HTML 元素或返回 HTML 元素的函式。容器會將 portal children 附加到其上。您也可以提供回呼函式，此函式會在 React layout effect 中呼叫。這讓您可以從 ref 設定容器，並使伺服器端渲染成為可能。預設情況下，它使用最上層 document 物件的 body，因此大部分時間它只是 `document.body`。
disableAutoFocus	bool	false	若為 `true`，當 modal 開啟時，將不會自動將焦點轉移到自身，並在關閉時將焦點替換回最後一個 focus 的元素。這也適用於任何具有 `disableAutoFocus` prop 的 modal 子元素。一般來說，不應將此設定為 `true`，因為這會使 modal 對於輔助技術（如螢幕閱讀器）的存取性降低。
disableEnforceFocus	bool	false	若為 `true`，modal 開啟時將不會阻止焦點離開 modal。一般來說，不應將此設定為 `true`，因為這會使 modal 對於輔助技術（如螢幕閱讀器）的存取性降低。
disableEscapeKeyDown	bool	false	若為 `true`，按下 escape 鍵將不會觸發 `onClose` 回呼函式。
disablePortal	bool	false	子元素將位於父組件的 DOM 階層之下。
disableRestoreFocus	bool	false	若為 `true`，一旦 modal 隱藏或卸載，modal 將不會將焦點還原到先前 focus 的元素。
disableScrollLock	bool	false	停用滾動鎖定行為。
hideBackdrop	bool	false	若為 `true`，則不會渲染背景幕。
keepMounted	bool	false	始終將子元素保留在 DOM 中。當您希望最大化 Modal 的響應性時，此 prop 在 SEO 情況下可能很有用。
onClose (關閉時回呼)	func	-	當組件請求關閉時觸發的回呼函式。`reason` 參數可選擇性地用於控制對 `onClose` 的響應。簽名：`function(event: object, reason: string) => void` `event` 回呼函式的事件來源。 `reason` 可以是：`"escapeKeyDown"`、`"backdropClick"`、`"closeClick"`。
slotProps (插槽 Props)	{ backdrop?: func \| object, root?: func \| object }	{}	用於每個插槽內部的 props。
slots (插槽)	{ backdrop?: elementType, root?: elementType }	{}	用於每個插槽內部的組件。有關更多詳細資訊，請參閱下方的 Slots API。
sx (樣式)	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆寫以及其他 CSS 樣式的系統 prop。有關更多詳細資訊，請參閱 `sx` 頁面。

ref 會轉發到根元素。

插槽

若要了解如何自訂插槽，請查看覆寫組件結構指南。

插槽名稱	類別名稱	預設組件	描述
root (根)	.MuiModal-root	`'div'`	渲染根的組件。
backdrop (背景幕)	.MuiModal-backdrop	`'div'`	渲染背景幕的組件。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於組件的插槽。

類別名稱	規則名稱	描述
.MuiModal-hidden	隱藏	當 open 為 false 時，應用於根元素的類別名稱。

您可以使用以下自訂選項之一來覆寫組件的樣式

使用全域類別名稱。
在自訂主題中使用規則名稱作為組件的styleOverrides 屬性的一部分。

原始碼

如果您在此頁面中找不到資訊，請考慮查看組件的實作以取得更多詳細資訊。