骨架API

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

範例

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

import Skeleton from '@mui/material/Skeleton';
// or
import { Skeleton } from '@mui/material';

閱讀此關於最小化 bundle 大小的指南，以了解差異。

原生元件的 Props 也可用。

名稱	類型	預設	描述
animation	'pulse' \| 'wave' \| false	'pulse'	動畫效果。如果 `false`，則停用動畫效果。
children	node	-	可選的 children，用於推斷寬度和高度。
classes	object	-	覆寫或擴展應用於元件的樣式。請參閱下方的 CSS classes API 以了解更多詳細資訊。
component	elementType	-	用於根節點的元件。可以是字串 (用於 HTML 元素) 或元件。
height	number \| string	-	骨架的高度。當您不想將骨架調整為文字元素，而是調整為卡片等元素時很有用。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以了解更多詳細資訊。
variant	'circular' \| 'rectangular' \| 'rounded' \| 'text' \| string	'text'	將呈現的內容類型。
width	number \| string	-	骨架的寬度。當骨架位於沒有自身寬度的內聯元素內時很有用。

`ref` 會轉發到根元素。

您可以使用 `MuiSkeleton` 透過主題變更此元件的預設 props。

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

類別名稱	規則名稱	描述
.MuiSkeleton-circular	circular	如果 `variant="circular"`，則應用於根元素的樣式。
.MuiSkeleton-fitContent	fitContent	當元件傳遞 children 且沒有寬度時套用的樣式。
.MuiSkeleton-heightAuto	heightAuto	當元件傳遞 children 且沒有高度時套用的樣式。
.MuiSkeleton-pulse	pulse	如果 `animation="pulse"`，則應用於根元素的樣式。
.MuiSkeleton-rectangular	rectangular	如果 `variant="rectangular"`，則應用於根元素的樣式。
.MuiSkeleton-root	root	應用於根元素的樣式。
.MuiSkeleton-rounded	rounded	如果 `variant="rounded"`，則應用於根元素的樣式。
.MuiSkeleton-text	text	如果 `variant="text"`，則應用於根元素的樣式。
.MuiSkeleton-wave	wave	如果 `animation="wave"`，則應用於根元素的樣式。
.MuiSkeleton-withChildren	withChildren	當元件傳遞 children 時套用的樣式。

您可以使用以下其中一種自訂選項來覆寫元件的樣式

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