跳到主要内容跳到主要内容

InputBaseAPI

React InputBase 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

导入

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

通过阅读这篇关于最小化包大小的指南,了解它们之间的区别。



InputBase 包含尽可能少的样式。它的目标是成为创建输入框的简单构建块。它包含大量的样式重置和一些状态逻辑。

Props

原生组件的 Props 也可用。

名称类型默认值描述
autoComplete字符串-

此 prop 帮助用户更快地填写表单,尤其是在移动设备上。名称可能会令人困惑,因为它更像是自动填充。您可以按照规范了解更多信息。

autoFocus布尔值-

如果为 true,则在首次挂载时 input 元素会获得焦点。

classes对象-

覆盖或扩展应用于组件的样式。

有关更多详细信息,请参阅下面的CSS 类 API

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

组件的颜色。它支持默认主题颜色和自定义主题颜色,可以按照调色板自定义指南中所示的方式添加。该 prop 默认为从父 FormControl 组件继承的值 ('primary')。

components{ Input?: 元素类型, Root?: 元素类型 }{}

用于每个 slot 内部的组件。

componentsProps{ input?: 对象, root?: 对象 }{}

slot 组件的额外 props。您可以覆盖现有 props 或添加新的。

defaultValue任意类型-

默认值。当组件不受控制时使用。

disabled布尔值-

如果为 true,则组件将被禁用。该 prop 默认为从父 FormControl 组件继承的值 (false)。

disableInjectingGlobalStyles布尔值false

如果为 true,则在挂载/卸载时不会注入/移除用于自动填充关键帧的 GlobalStyles。请确保在应用程序顶部注入它们。此选项旨在帮助提高初始渲染性能,如果您一次加载大量 Input 组件。

endAdornment节点-

此组件的尾部 InputAdornment

error布尔值-

如果为 true,则 input 将指示错误。该 prop 默认为从父 FormControl 组件继承的值 (false)。

fullWidth布尔值false

如果为 true,则 input 将占据其容器的全部宽度。

id字符串-

input 元素的 id。

inputComponent元素类型'input'

用于 input 元素的组件。可以是用于 HTML 元素的字符串,也可以是组件。

inputProps对象{}

属性应用于 input 元素。

inputRefref-

将 ref 传递给 input 元素。

margin'dense'
| 'none'
-

如果为 dense,将调整垂直间距。这通常通过 FormControl 中的 context 获得。该 prop 默认为从父 FormControl 组件继承的值 ('none')。

maxRows数字
| string
-

当 multiline 选项设置为 true 时,要显示的最大行数。

minRows数字
| string
-

当 multiline 选项设置为 true 时,要显示的最小行数。

multiline布尔值false

如果为 true,则会渲染 TextareaAutosize 元素。

name字符串-

input 元素的 Name 属性。

onBlur函数-

input 失焦时触发的回调。
请注意,第一个参数 (event) 可能是 undefined。

onChange函数-

当值更改时触发的回调。

签名:function(event: React.ChangeEvent) => void
  • event 回调的事件源。您可以通过访问 event.target.value (字符串) 来获取新值。
onInvalid函数-

input 不满足其约束条件时触发的回调。

placeholder字符串-

在用户输入值之前,input 中显示的简短提示。

readOnly布尔值-

它阻止用户更改字段的值(而不是与字段交互)。

required布尔值-

如果为 true,则 input 元素为必填项。该 prop 默认为从父 FormControl 组件继承的值 (false)。

rows数字
| string
-

当 multiline 选项设置为 true 时,要显示的行数。

size'medium'
| 'small'
| string
-

组件的大小。

slotProps{ input?: 对象, root?: 对象 }{}

slot 组件的额外 props。您可以覆盖现有 props 或添加新的。
此 prop 是 componentsProps prop 的别名,该 prop 将在未来被弃用。

slots{ input?: 元素类型, root?: 元素类型 }{}

用于每个 slot 内部的组件。
此 prop 是 components prop 的别名,该 prop 将在未来被弃用。

startAdornment节点-

此组件的起始 InputAdornment

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

允许定义系统覆盖以及其他 CSS 样式的系统 prop。

有关更多详细信息,请参阅 sx 页面

type字符串'text'

input 元素的类型。它应该是有效的 HTML5 input 类型

value任意类型-

input 元素的值,受控组件必需。

ref 被转发到根元素。

主题默认 props

您可以使用 MuiInputBase 通过主题更改此组件的默认 props。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时,它们会应用于组件的 slot。

类名规则名称描述
.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 元素的样式。

您可以使用以下自定义选项之一来覆盖组件的样式

  • 使用全局类名。
  • 在自定义主题中,使用作为组件 styleOverrides 属性一部分的规则名称。

源代码

如果您在此页面中没有找到所需信息,请考虑查看组件的实现以获取更多详细信息。