OutlinedInputAPI

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

示範

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

文字欄位

匯入

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

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

Props

InputBase 元件的 props 也可使用。

名稱	類型	預設值	描述
autoComplete	string	-	此 prop 幫助使用者更快地填寫表單，尤其是在行動裝置上。名稱可能會讓人困惑，因為它更像是自動填寫。您可以遵循規範了解更多資訊。
autoFocus	bool	-	如果為 `true`，則在首次掛載期間 `input` 元素會取得焦點。
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方CSS 類別 API 以取得更多詳細資訊。
color	'primary' \| 'secondary' \| string	-	元件的顏色。它同時支援預設和自訂主題顏色，可以按照調色盤自訂指南中所示新增。此 prop 預設為從父 FormControl 元件繼承的值 (`'primary'`)。
components	{ Input?: elementType, Root?: elementType }	{}	用於每個內部 slot 的元件。已棄用－改用 `slots` prop。此 prop 將在 v7 中移除。請參閱從已棄用的 API 遷移以取得更多詳細資訊。
defaultValue	any	-	預設值。當元件不受控制時使用。
disabled	bool	-	如果為 `true`，則元件會停用。此 prop 預設為從父 FormControl 元件繼承的值 (`false`)。
endAdornment	node	-	此元件的結尾 `InputAdornment`。
error	bool	-	如果為 `true`，則 `input` 將指示錯誤。此 prop 預設為從父 FormControl 元件繼承的值 (`false`)。
fullWidth	bool	false	如果為 `true`，則 `input` 將佔用其容器的完整寬度。
id	string	-	`input` 元素的 id。
inputComponent	elementType	'input'	用於 `input` 元素的元件。可以是字串 (使用 HTML 元素) 或元件。
inputProps	object	{}	屬性套用至 `input` 元素。
inputRef	ref	-	將 ref 傳遞至 `input` 元素。
label	node	-	`input` 的標籤。僅用於版面配置。實際的標籤由 `InputLabel` 處理。
margin	'dense' \| 'none'	-	如果為 `dense`，將調整垂直間距。這通常透過 FormControl 的 context 取得。此 prop 預設為從父 FormControl 元件繼承的值 (`'none'`)。
maxRows	number \| string	-	當 multiline 選項設定為 true 時，要顯示的最大列數。
minRows	number \| string	-	Minimum number of rows to display when multiline option is set to true.
multiline	bool	false	如果為 `true`，則會呈現 TextareaAutosize 元素。
name	string	-	`input` 元素的 Name 屬性。
notched	bool	-	如果為 `true`，則外框會開槽以容納標籤。
onChange	func	-	當值變更時觸發的回呼。簽名：`function(event: React.ChangeEvent) => void` `event` 回呼的事件來源。您可以透過存取 `event.target.value` (字串) 來提取新值。
placeholder	string	-	使用者輸入值之前顯示在 `input` 中的簡短提示。
readOnly	bool	-	它防止使用者變更欄位的值 (而不是與欄位互動)。
required	bool	-	如果為 `true`，則 `input` 元素為必填。此 prop 預設為從父 FormControl 元件繼承的值 (`false`)。
rows	number \| string	-	當 multiline 選項設定為 true 時，要顯示的列數。
slots	{ input?: elementType, root?: elementType }	{}	用於每個內部 slot 的元件。此 prop 是 `components` prop 的別名，未來將會棄用。
startAdornment	node	-	此元件的開頭 `InputAdornment`。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及其他 CSS 樣式。請參閱 `sx` 頁面以取得更多詳細資訊。
type	string	'text'	`input` 元素的類型。它應該是有效的 HTML5 輸入類型。
value	any	-	`input` 元素的值，受控元件的必要屬性。

ref 轉發到根元素。

繼承

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

主題預設 props

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

CSS 類別

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

類別名稱	規則名稱	描述
.Mui-disabled		如果 `disabled={true}`，則套用至根元素的樣式。
.Mui-error		如果 `error={true}`，則套用至根元素的狀態類別。
.Mui-focused		如果元件取得焦點，則套用至根元素的樣式。
.MuiOutlinedInput-adornedEnd	adornedEnd	如果提供 `endAdornment`，則套用至根元素的樣式。
.MuiOutlinedInput-adornedStart	adornedStart	如果提供 `startAdornment`，則套用至根元素的樣式。
.MuiOutlinedInput-colorSecondary	colorSecondary	如果顏色為 secondary，則套用至根元素的樣式。
.MuiOutlinedInput-input	input	套用至 input 元素的樣式。
.MuiOutlinedInput-inputAdornedEnd	inputAdornedEnd	如果提供 `endAdornment`，則套用至 input 元素的樣式。
.MuiOutlinedInput-inputAdornedStart	inputAdornedStart	如果提供 `startAdornment`，則套用至 input 元素的樣式。
.MuiOutlinedInput-inputMultiline	inputMultiline	如果 `multiline={true}`，則套用至 input 元素的樣式。
.MuiOutlinedInput-inputSizeSmall	inputSizeSmall	如果 `size="small"`，則套用至 input 元素的樣式。
.MuiOutlinedInput-inputTypeSearch	inputTypeSearch	如果 `type="search"`，則套用至 input 元素的樣式。
.MuiOutlinedInput-multiline	multiline	Styles applied to the root element if `multiline={true}`.
.MuiOutlinedInput-notchedOutline	notchedOutline	套用至 NotchedOutline 元素的樣式。
.MuiOutlinedInput-root	root	套用至根元素的樣式。
.MuiOutlinedInput-sizeSmall	sizeSmall	如果 `size="small"`，則套用至 input 元素的樣式。

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

使用全域類別名稱。
使用規則名稱作為自訂主題中元件的 styleOverrides 屬性的一部分。

原始碼

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