ModalCloseAPI
React ModalClose 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。
範例
匯入
import ModalClose from '@mui/joy/ModalClose';
// or
import { ModalClose } from '@mui/joy';瞭解差異，請閱讀此關於最小化 bundle size 的指南。
原生元件的屬性也可用。
| 名稱 | 類型 | 預設 | 描述 |
|---|---|---|---|
| color | 'danger' | 'neutral' | 'primary' | 'success' | 'warning' | string | 'neutral' | 元件的顏色。它支援此元件適用的主題顏色。 若要瞭解如何新增自己的顏色，請查看主題元件—擴展顏色。 |
| component | elementType | - | 用於根節點的元件。可以是 HTML 元素的字串或元件。 |
| size | 'sm' | 'md' | 'lg' | string | 'md' | 元件的大小。 若要瞭解如何將自訂尺寸新增至元件，請查看主題元件—擴展尺寸。 |
| slotProps | { root?: func | object } | {} | 用於內部每個插槽的 props。 |
| slots | { root?: elementType } | {} | 用於內部每個插槽的元件。 請參閱下方的 插槽 API 以瞭解更多詳細資訊。 |
| sx | Array<func | object | bool> | func | object | - | 系統屬性，允許定義系統覆寫以及其他 CSS 樣式。 請參閱 `sx` 頁面 以瞭解更多詳細資訊。 |
| variant | 'outlined' | 'plain' | 'soft' | 'solid' | string | 'plain' | 要使用的全域變體。 若要瞭解如何新增自己的變體，請查看主題元件—擴展變體。 |
ref 轉發到根元素。主題預設屬性
您可以使用 JoyModalClose 透過主題變更此元件的預設屬性。
若要瞭解如何自訂插槽，請查看覆寫元件結構指南。
| 插槽名稱 | 類別名稱 | 預設元件 | 描述 |
|---|---|---|---|
| root | .MuiModalClose-root | 'button' | 呈現根的元件。 |
這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的插槽。
| 類別名稱 | 規則名稱 | 描述 |
|---|---|---|
| .MuiModalClose-colorContext | colorContext | 當觸發顏色反轉時，套用至根元素的類別名稱。 |
| .MuiModalClose-colorDanger | colorDanger | 如果 color="danger"，則套用至根元素的類別名稱。 |
| .MuiModalClose-colorNeutral | colorNeutral | 如果 color="neutral"，則套用至根元素的類別名稱。 |
| .MuiModalClose-colorPrimary | colorPrimary | 如果 color="primary"，則套用至根元素的類別名稱。 |
| .MuiModalClose-colorSuccess | colorSuccess | 如果 color="success"，則套用至根元素的類別名稱。 |
| .MuiModalClose-colorWarning | colorWarning | 如果 color="warning"，則套用至根元素的類別名稱。 |
| .MuiModalClose-sizeLg | sizeLg | 如果 size="lg"，則套用至根元素的類別名稱。 |
| .MuiModalClose-sizeMd | sizeMd | 如果 size="md"，則套用至根元素的類別名稱。 |
| .MuiModalClose-sizeSm | sizeSm | 如果 size="sm"，則套用至根元素的類別名稱。 |
| .MuiModalClose-variantOutlined | variantOutlined | 如果 variant="outlined"，則套用至根元素的類別名稱。 |
| .MuiModalClose-variantPlain | variantPlain | 如果 variant="plain"，則套用至根元素的類別名稱。 |
| .MuiModalClose-variantSoft | variantSoft | 如果 variant="soft"，則套用至根元素的類別名稱。 |
| .MuiModalClose-variantSolid | variantSolid | 如果 variant="solid"，則套用至根元素的類別名稱。 |
您可以使用以下其中一個自訂選項覆寫元件的樣式
- 使用全域類別名稱。
- 在自訂主題中使用規則名稱作為元件
styleOverrides屬性的一部分。
原始碼
如果您在此頁面中找不到資訊，請考慮查看元件的實作以瞭解更多詳細資訊。