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属性一部分的规则名称。
源代码
如果您在此页面中没有找到所需信息,请考虑查看组件的实现以获取更多详细信息。