StepLabelAPI

React StepLabel 元件的 API 參考文件。瞭解這個匯出模組的 props、CSS 和其他 API。

範例

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

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

原生元件的 Props 也可使用。

名稱	類型	預設值	描述
children	node	-	在大多數情況下，只會是一個包含標籤標題的字串。
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方CSS 類別 API 以取得更多詳細資訊。
componentsProps	{ label?: object }	{}	用於每個內部 slot 的 props。已棄用－請改用 `slotProps` prop。此 prop 將在 v7 版本中移除。請參閱從已棄用的 API 遷移以取得更多詳細資訊。
error	bool	false	若為 `true`，步驟會標記為失敗。
icon	node	-	覆寫步驟圖示的預設標籤。
optional	node	-	要顯示的選用節點。
slotProps	{ label?: func \| object, root?: func \| object, stepIcon?: func \| object }	{}	用於每個內部 slot 的 props。
slots	{ label?: elementType, root?: elementType, stepIcon?: elementType }	{}	用於每個內部 slot 的元件。
StepIconComponent	elementType	-	要取代 `StepIcon` 呈現的元件。已棄用－請改用 `slots.stepIcon`。此 prop 將在 v7 版本中移除。請參閱從已棄用的 API 遷移以取得更多詳細資訊。
StepIconProps	object	-	套用至 `StepIcon` 元素的 Props。已棄用－請改用 `slotProps.stepIcon`。此 prop 將在 v7 版本中移除。請參閱從已棄用的 API 遷移以取得更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以取得更多詳細資訊。

ref 會轉發到根元素。

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

Slot 名稱	類別名稱	預設元件	描述
root	.MuiStepLabel-root	`span`	呈現 root 的元件。
label	.MuiStepLabel-label	`span`	呈現標籤的元件。
stepIcon			要取代 `StepIcon` 呈現的元件。

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

類別名稱	規則名稱	描述
.Mui-active		若 `active={true}`，則套用至標籤元素的狀態類別。
.Mui-completed		若 `completed={true}`，則套用至標籤元素的狀態類別。
.Mui-disabled		若 `disabled={true}`，則套用至 root 和標籤元素的狀態類別。
.Mui-error		若 `error={true}`，則套用至 root 和標籤元素的狀態類別。
.MuiStepLabel-alternativeLabel	alternativeLabel	若 `alternativeLabel={true}`，則套用至 root、圖示容器和標籤的狀態類別。
.MuiStepLabel-horizontal	horizontal	若 `orientation="horizontal"`，則套用至 root 元素的樣式。
.MuiStepLabel-iconContainer	iconContainer	套用至 `icon` 容器元素的樣式。
.MuiStepLabel-labelContainer	labelContainer	套用至包裝標籤和 `optional` 的容器元素的樣式。
.MuiStepLabel-vertical	vertical	若 `orientation="vertical"`，則套用至 root 元素的樣式。

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

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