InputBaseAPI
React InputBase 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。
範例
導入
import InputBase from '@mui/material/InputBase';
// or
import { InputBase } from '@mui/material';
閱讀這份關於最小化套件大小的指南,以瞭解差異。
InputBase
包含盡可能少的樣式。它旨在成為創建輸入的簡單構建模組。它包含大量的樣式重置和一些狀態邏輯。
原生元件的 Props 也可用。
名稱 | 類型 | 預設值 | 描述 |
---|---|---|---|
autoComplete | string | - | 此 prop 幫助使用者更快地填寫表單,尤其是在行動裝置上。名稱可能會令人困惑,因為它更像是自動填寫。您可以依照規範瞭解更多資訊。 |
autoFocus | bool | - | 如果為 |
classes | object | - | 覆寫或擴展應用於元件的樣式。 有關更多詳細資訊,請參閱下方的CSS 類別 API。 |
color | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string | - | 元件的顏色。它支援預設和自訂主題顏色,可以按照調色盤自訂指南中所示新增。此 prop 預設為從父 FormControl 元件繼承的值 ( |
components | { Input?: elementType, Root?: elementType } | {} | 用於每個插槽內部的元件。 |
componentsProps | { input?: object, root?: object } | {} | 插槽元件的額外 props。您可以覆寫現有的 props 或新增 props。 |
defaultValue | any | - | 預設值。當元件不受控制時使用。 |
disabled | bool | - | 如果為 |
disableInjectingGlobalStyles | bool | false | 如果為 |
endAdornment | node | - | 此元件的結尾 |
error | bool | - | 如果為 |
fullWidth | bool | false | 如果為 |
id | string | - |
|
inputComponent | element type | 'input' | 用於 |
inputProps | object | {} | 屬性應用於 |
inputRef | ref | - | 將 ref 傳遞給 |
margin | 'dense' | 'none' | - | 如果為 |
maxRows | number | string | - | 當 multiline 選項設定為 true 時,要顯示的最大行數。 |
minRows | number | string | - | 當 multiline 選項設定為 true 時,要顯示的最小行數。 |
multiline | bool | false | 如果為 |
name | string | - |
|
onBlur | func | - | 當 |
onChange | func | - | 當值變更時觸發的回呼。 簽名: function(event: React.ChangeEvent
|
onInvalid | func | - | 當 |
placeholder | string | - | 使用者輸入值之前顯示在 |
readOnly | bool | - | 它防止使用者變更欄位的值(而非與欄位互動)。 |
required | bool | - | 如果為 |
rows | number | string | - | 當 multiline 選項設定為 true 時,要顯示的行數。 |
size | 'medium' | 'small' | string | - | 元件的大小。 |
slotProps | { input?: object, root?: object } | {} | 插槽元件的額外 props。您可以覆寫現有的 props 或新增 props。 |
slots | { input?: elementType, root?: elementType } | {} | 用於每個插槽內部的元件。 |
startAdornment | node | - | 此元件的開頭 |
sx | Array<func | object | bool> | func | object | - | 允許定義系統覆寫以及其他 CSS 樣式的系統 prop。 有關更多詳細資訊,請參閱 `sx` 頁面。 |
type | string | 'text' |
|
value | any | - |
|
ref
轉發到根元素。主題預設 props
您可以使用 MuiInputBase
透過主題變更此元件的預設 props。
這些類別名稱對於使用 CSS 設定樣式很有用。當特定狀態被觸發時,它們會應用於元件的插槽。
類別名稱 | 規則名稱 | 描述 |
---|---|---|
.Mui-disabled | 如果 disabled={true} ,則應用於根元素的樣式。 | |
.Mui-error | 如果 error={true} ,則應用於根元素的狀態類別。 | |
.Mui-focused | 如果元件被聚焦,則應用於根元素的樣式。 | |
.Mui-readOnly | 如果 readOnly={true} ,則應用於根元素的狀態類別。 | |
.MuiInputBase-adornedEnd | adornedEnd | 如果提供了 endAdornment ,則應用於根元素的樣式。 |
.MuiInputBase-adornedStart | adornedStart | 如果提供了 startAdornment ,則應用於根元素的樣式。 |
.MuiInputBase-colorSecondary | colorSecondary | 如果顏色為 secondary,則應用於根元素的樣式。 |
.MuiInputBase-formControl | formControl | 如果元件是 FormControl 的後代,則應用於根元素的樣式。 |
.MuiInputBase-fullWidth | fullWidth | 如果 fullWidth={true} ,則應用於根元素的樣式。 |
.MuiInputBase-input | input | 應用於 input 元素的樣式。 |
.MuiInputBase-inputAdornedEnd | inputAdornedEnd | 如果提供了 endAdornment ,則應用於 input 元素的樣式。 |
.MuiInputBase-inputAdornedStart | inputAdornedStart | 如果提供了 startAdornment ,則應用於 input 元素的樣式。 |
.MuiInputBase-inputHiddenLabel | inputHiddenLabel | 如果 hiddenLabel={true} ,則應用於 input 元素的樣式。 |
.MuiInputBase-inputMultiline | inputMultiline | 如果 multiline={true} ,則應用於 input 元素的樣式。 |
.MuiInputBase-inputSizeSmall | inputSizeSmall | 如果 size="small" ,則應用於 input 元素的樣式。 |
.MuiInputBase-inputTypeSearch | inputTypeSearch | |
.MuiInputBase-multiline | multiline | 如果 multiline={true} ,則應用於根元素的樣式。 |
.MuiInputBase-root | root | 應用於根元素的樣式。 |
.MuiInputBase-sizeSmall | sizeSmall | 如果 size="small" ,則應用於 input 元素的樣式。 |
您可以使用以下自訂選項之一覆寫元件的樣式
- 使用全域類別名稱。
- 在自訂主題中使用規則名稱作為元件
styleOverrides
屬性的一部分。
原始碼
如果您在本頁中找不到資訊,請考慮查看元件的實作以獲取更多詳細資訊。