InputLabelAPI

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

範例展示

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

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

FormLabel 元件的 props 也可使用。

名稱	類型	預設值	描述
children	node	-	元件的內容。
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方CSS 類別 API 以瞭解更多詳細資訊。
color	'error' \| 'info' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| string	-	元件的色彩。它支援預設和自訂主題色彩，可以按照調色盤自訂指南中所示的方式新增。
disableAnimation	bool	false	若為 `true`，則停用轉場動畫。
disabled	bool	-	若為 `true`，則停用元件。
error	bool	-	若為 `true`，則標籤會以錯誤狀態顯示。
focused	bool	-	若為 `true`，則此標籤的 `input` 會取得焦點。
margin	'dense'	-	若為 `dense`，將調整垂直間距。這通常透過 FormControl 的 context 取得。
required	bool	-	若為 `true`，則標籤會指示 `input` 為必填。
shrink	bool	-	若為 `true`，則標籤會縮小。
size	'medium' \| 'small' \| string	'medium'	元件的大小。
sx	Array<func \| object \| bool> \| func \| object	-	系統 props，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以瞭解更多詳細資訊。
variant	'filled' \| 'outlined' \| 'standard'	-	要使用的變體。

ref 傳遞至根元素。

雖然上面未明確記錄，但 FormLabel 元件的 props 也可在 InputLabel 中使用。您可以利用此優勢來鎖定巢狀元件。

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

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

類別名稱	規則名稱	描述
.Mui-disabled		若 `disabled={true}`，則套用至根元素的狀態類別。
.Mui-error		若 `error={true}`，則套用至根元素的狀態類別。
.Mui-focused		若 `focused={true}`，則套用至根元素的狀態類別。
.Mui-required		若 `required={true}`，則套用至根元素的狀態類別。
.MuiInputLabel-animated	animated	除非 `disableAnimation={true}`，否則套用至 input 元素的樣式。
.MuiInputLabel-asterisk	asterisk	套用至星號元素的狀態類別。
.MuiInputLabel-filled	filled	若 `variant="filled"`，則套用至根元素的樣式。
.MuiInputLabel-formControl	formControl	若元件為 `FormControl` 的後代，則套用至根元素的樣式。
.MuiInputLabel-outlined	outlined	若 `variant="outlined"`，則套用至根元素的樣式。
.MuiInputLabel-root	root	套用至根元素的樣式。
.MuiInputLabel-shrink	shrink	若 `shrink={true}`，則套用至 input 元素的樣式。
.MuiInputLabel-sizeSmall	sizeSmall	若 `size="small"`，則套用至根元素的樣式。
.MuiInputLabel-standard	standard	若 `variant="standard"`，則套用至根元素的樣式。

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

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