跳到主要內容跳到主要內容

InputBaseAPI

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

範例

導入

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

閱讀這份關於最小化套件大小的指南,以瞭解差異。



InputBase 包含盡可能少的樣式。它旨在成為創建輸入的簡單構建模組。它包含大量的樣式重置和一些狀態邏輯。

Props

原生元件的 Props 也可用。

名稱類型預設值描述
autoCompletestring-

此 prop 幫助使用者更快地填寫表單,尤其是在行動裝置上。名稱可能會令人困惑,因為它更像是自動填寫。您可以依照規範瞭解更多資訊。

autoFocusbool-

如果為 true,則在首次掛載期間 input 元素會被聚焦。

classesobject-

覆寫或擴展應用於元件的樣式。

有關更多詳細資訊,請參閱下方的CSS 類別 API

color'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string
-

元件的顏色。它支援預設和自訂主題顏色,可以按照調色盤自訂指南中所示新增。此 prop 預設為從父 FormControl 元件繼承的值 ('primary')。

components{ Input?: elementType, Root?: elementType }{}

用於每個插槽內部的元件。

componentsProps{ input?: object, root?: object }{}

插槽元件的額外 props。您可以覆寫現有的 props 或新增 props。

defaultValueany-

預設值。當元件不受控制時使用。

disabledbool-

如果為 true,則元件會停用。此 prop 預設為從父 FormControl 元件繼承的值 (false)。

disableInjectingGlobalStylesboolfalse

如果為 true,則在掛載/卸載時,將不會注入/移除自動填寫關鍵影格的 GlobalStyles。請確保在應用程式頂部注入它們。如果您一次載入大量 Input 元件,此選項旨在幫助提升初始渲染效能。

endAdornmentnode-

此元件的結尾 InputAdornment

errorbool-

如果為 true,則 input 將指示錯誤。此 prop 預設為從父 FormControl 元件繼承的值 (false)。

fullWidthboolfalse

如果為 true,則 input 將佔據其容器的完整寬度。

idstring-

input 元素的 id。

inputComponentelement type'input'

用於 input 元素的元件。可以是字串以使用 HTML 元素或元件。

inputPropsobject{}

屬性應用於 input 元素。

inputRefref-

將 ref 傳遞給 input 元素。

margin'dense'
| 'none'
-

如果為 dense,將調整垂直間距。這通常透過 FormControl 的 context 取得。此 prop 預設為從父 FormControl 元件繼承的值 ('none')。

maxRowsnumber
| string
-

當 multiline 選項設定為 true 時,要顯示的最大行數。

minRowsnumber
| string
-

當 multiline 選項設定為 true 時,要顯示的最小行數。

multilineboolfalse

如果為 true,則會渲染 TextareaAutosize 元素。

namestring-

input 元素的 Name 屬性。

onBlurfunc-

input 失去焦點時觸發的回呼。
請注意,第一個參數 (event) 可能未定義。

onChangefunc-

當值變更時觸發的回呼。

簽名:function(event: React.ChangeEvent) => void
  • event 回呼的事件來源。您可以透過存取 event.target.value (字串) 來提取新值。
onInvalidfunc-

input 不滿足其約束時觸發的回呼。

placeholderstring-

使用者輸入值之前顯示在 input 中的簡短提示。

readOnlybool-

它防止使用者變更欄位的值(而非與欄位互動)。

requiredbool-

如果為 true,則 input 元素為必填。此 prop 預設為從父 FormControl 元件繼承的值 (false)。

rowsnumber
| string
-

當 multiline 選項設定為 true 時,要顯示的行數。

size'medium'
| 'small'
| string
-

元件的大小。

slotProps{ input?: object, root?: object }{}

插槽元件的額外 props。您可以覆寫現有的 props 或新增 props。
此 prop 是 componentsProps prop 的別名,未來將被棄用。

slots{ input?: elementType, root?: elementType }{}

用於每個插槽內部的元件。
此 prop 是 components prop 的別名,未來將被棄用。

startAdornmentnode-

此元件的開頭 InputAdornment

sxArray<func
| object
| bool>
| func
| object
-

允許定義系統覆寫以及其他 CSS 樣式的系統 prop。

有關更多詳細資訊,請參閱 `sx` 頁面

typestring'text'

input 元素的類型。它應該是有效的 HTML5 輸入類型

valueany-

input 元素的值,受控元件的必要屬性。

ref 轉發到根元素。

主題預設 props

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

CSS 類別

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

類別名稱規則名稱描述
.Mui-disabled如果 disabled={true},則應用於根元素的樣式。
.Mui-error如果 error={true},則應用於根元素的狀態類別。
.Mui-focused如果元件被聚焦,則應用於根元素的樣式。
.Mui-readOnly如果 readOnly={true},則應用於根元素的狀態類別。
.MuiInputBase-adornedEndadornedEnd如果提供了 endAdornment,則應用於根元素的樣式。
.MuiInputBase-adornedStartadornedStart如果提供了 startAdornment,則應用於根元素的樣式。
.MuiInputBase-colorSecondarycolorSecondary如果顏色為 secondary,則應用於根元素的樣式。
.MuiInputBase-formControlformControl如果元件是 FormControl 的後代,則應用於根元素的樣式。
.MuiInputBase-fullWidthfullWidth如果 fullWidth={true},則應用於根元素的樣式。
.MuiInputBase-hiddenLabelhiddenLabel如果 hiddenLabel={true},則應用於根元素的樣式。
.MuiInputBase-inputinput應用於 input 元素的樣式。
.MuiInputBase-inputAdornedEndinputAdornedEnd如果提供了 endAdornment,則應用於 input 元素的樣式。
.MuiInputBase-inputAdornedStartinputAdornedStart如果提供了 startAdornment,則應用於 input 元素的樣式。
.MuiInputBase-inputHiddenLabelinputHiddenLabel如果 hiddenLabel={true},則應用於 input 元素的樣式。
.MuiInputBase-inputMultilineinputMultiline如果 multiline={true},則應用於 input 元素的樣式。
.MuiInputBase-inputSizeSmallinputSizeSmall如果 size="small",則應用於 input 元素的樣式。
.MuiInputBase-inputTypeSearchinputTypeSearch
.MuiInputBase-multilinemultiline如果 multiline={true},則應用於根元素的樣式。
.MuiInputBase-rootroot應用於根元素的樣式。
.MuiInputBase-sizeSmallsizeSmall如果 size="small",則應用於 input 元素的樣式。

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

原始碼

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