BackdropAPI
React Backdrop 組件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。
範例
匯入
import Backdrop from '@mui/material/Backdrop';
// or
import { Backdrop } from '@mui/material';閱讀此關於最小化 bundle 大小的指南，以了解差異。
Fade 組件的 Props 也可使用。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| open* | bool | - | 如果 |
| children | node | - | 組件的內容。 |
| classes | object | - | 覆寫或擴充套用至組件的樣式。 請參閱下方CSS 類別 API 以了解更多詳細資訊。 |
| component | elementType | - | 用於根節點的組件。可以是 HTML 元素的字串或組件。 |
| components | { Root?: elementType } | {} | 用於每個內部插槽的組件。 |
| componentsProps | { root?: object } | {} | 插槽組件的額外 props。您可以覆寫現有的 props 或新增 props。 |
| invisible | bool | false | 如果 |
| slotProps | { root?: func | object, transition?: func | object } | {} | 用於每個內部插槽的 props。 |
| slots | { root?: elementType, transition?: elementType } | {} | 用於每個內部插槽的組件。 |
| sx | Array<func | object | bool> | func | object | - | 系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。 請參閱 `sx` 頁面 以了解更多詳細資訊。 |
| TransitionComponent | elementType | Fade | 用於過渡效果的組件。請遵循本指南以了解有關此組件需求的更多資訊。 |
| transitionDuration | number | { appear?: number, enter?: number, exit?: number } | - | 過渡效果的持續時間，以毫秒為單位。您可以為所有過渡效果指定單個 timeout，或使用物件個別指定。 |
ref 轉發到根元素。繼承
雖然上面未明確記錄，但 Fade 組件的 props 也可在 Backdrop 中使用。您可以利用這一點來目標巢狀組件。
主題預設 Props
您可以使用 MuiBackdrop 透過主題變更此組件的預設 props。
| 插槽名稱 | 類別名稱 | 預設組件 | 描述 |
|---|---|---|---|
| root | .MuiBackdrop-root | 'div' | 呈現根元素的組件。 |
| transition | Fade | 呈現過渡效果的組件。請遵循本指南以了解有關此組件需求的更多資訊。 |
這些類別名稱對於使用 CSS 設定樣式很有用。當特定狀態被觸發時，它們會套用至組件的插槽。
| 類別名稱 | 規則名稱 | 描述 |
|---|---|---|
| .MuiBackdrop-invisible | invisible | 如果 invisible={true}，則套用至根元素的樣式。 |
您可以使用以下自訂選項之一覆寫組件的樣式
- 使用全域類別名稱。
- 在自訂主題中使用規則名稱作為組件的
styleOverrides屬性的一部分。
原始碼
如果您在此頁面中找不到資訊，請考慮查看組件的實作以取得更多詳細資訊。