InputBaseAPI
React InputBase 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。
演示
导入
import InputBase from '@mui/material/InputBase';
// or
import { InputBase } from '@mui/material';
通过阅读这篇关于最小化包大小的指南,了解它们之间的区别。
InputBase 包含尽可能少的样式。它的目标是成为创建输入框的简单构建块。它包含大量的样式重置和一些状态逻辑。
原生组件的 Props 也可用。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
autoComplete | 字符串 | - | 此 prop 帮助用户更快地填写表单,尤其是在移动设备上。名称可能会令人困惑,因为它更像是自动填充。您可以按照规范了解更多信息。 |
autoFocus | 布尔值 | - | 如果为 |
classes | 对象 | - | 覆盖或扩展应用于组件的样式。 有关更多详细信息,请参阅下面的CSS 类 API。 |
color | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string | - | 组件的颜色。它支持默认主题颜色和自定义主题颜色,可以按照调色板自定义指南中所示的方式添加。该 prop 默认为从父 FormControl 组件继承的值 ( |
components | { Input?: 元素类型, Root?: 元素类型 } | {} | 用于每个 slot 内部的组件。 |
componentsProps | { input?: 对象, root?: 对象 } | {} | slot 组件的额外 props。您可以覆盖现有 props 或添加新的。 |
defaultValue | 任意类型 | - | 默认值。当组件不受控制时使用。 |
disabled | 布尔值 | - | 如果为 |
disableInjectingGlobalStyles | 布尔值 | false | 如果为 |
endAdornment | 节点 | - | 此组件的尾部 |
error | 布尔值 | - | 如果为 |
fullWidth | 布尔值 | false | 如果为 |
id | 字符串 | - |
|
inputComponent | 元素类型 | 'input' | 用于 |
inputProps | 对象 | {} | 属性应用于 |
inputRef | ref | - | 将 ref 传递给 |
margin | 'dense' | 'none' | - | 如果为 |
maxRows | 数字 | string | - | 当 multiline 选项设置为 true 时,要显示的最大行数。 |
minRows | 数字 | string | - | 当 multiline 选项设置为 true 时,要显示的最小行数。 |
multiline | 布尔值 | false | 如果为 |
name | 字符串 | - |
|
onBlur | 函数 | - | 当 |
onChange | 函数 | - | 当值更改时触发的回调。 签名: function(event: React.ChangeEvent
|
onInvalid | 函数 | - | 当 |
placeholder | 字符串 | - | 在用户输入值之前, |
readOnly | 布尔值 | - | 它阻止用户更改字段的值(而不是与字段交互)。 |
required | 布尔值 | - | 如果为 |
rows | 数字 | string | - | 当 multiline 选项设置为 true 时,要显示的行数。 |
size | 'medium' | 'small' | string | - | 组件的大小。 |
slotProps | { input?: 对象, root?: 对象 } | {} | slot 组件的额外 props。您可以覆盖现有 props 或添加新的。 |
slots | { input?: 元素类型, root?: 元素类型 } | {} | 用于每个 slot 内部的组件。 |
startAdornment | 节点 | - | 此组件的起始 |
sx | Array<func | object | bool> | func | object | - | 允许定义系统覆盖以及其他 CSS 样式的系统 prop。 有关更多详细信息,请参阅 |
type | 字符串 | 'text' |
|
value | 任意类型 | - |
|
ref
被转发到根元素。主题默认 props
您可以使用 MuiInputBase
通过主题更改此组件的默认 props。
这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时,它们会应用于组件的 slot。
类名 | 规则名称 | 描述 |
---|---|---|
.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
属性一部分的规则名称。
源代码
如果您在此页面中没有找到所需信息,请考虑查看组件的实现以获取更多详细信息。