InputAPI

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

演示

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

文本字段

导入

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

通过阅读关于最小化 bundle size 的指南，了解它们之间的区别。

Props

InputBase 组件的 Props 也可用。

名称	类型	默认值	描述
autoComplete	string	-	此 prop 帮助用户更快地填写表单，尤其是在移动设备上。名称可能会令人困惑，因为它更像是自动填充。您可以遵循规范了解更多信息。
autoFocus	bool	-	如果为 `true`，则在首次挂载期间 `input` 元素会获得焦点。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参见下方的CSS 类 API。
color	'primary' \| 'secondary' \| string	-	组件的颜色。它支持默认主题颜色和自定义主题颜色，可以按照调色板自定义指南中所示的方式添加。此 prop 默认为从父 FormControl 组件继承的值 (`'primary'`)。
components	{ Input?: elementType, Root?: elementType }	{}	用于内部每个插槽的组件。已弃用－请改用 `slots` prop。此 prop 将在 v7 中移除。有关更多详细信息，请参见从已弃用的 API 迁移。
componentsProps	{ input?: object, root?: object }	{}	插槽组件的额外 props。您可以覆盖现有 props 或添加新的 props。已弃用－请改用 `slotProps` prop。此 prop 将在 v7 中移除。有关更多详细信息，请参见从已弃用的 API 迁移。
defaultValue	any	-	默认值。当组件不受控制时使用。
disabled	bool	-	如果为 `true`，则组件被禁用。此 prop 默认为从父 FormControl 组件继承的值 (`false`)。
disableUnderline	bool	false	如果为 `true`，则 `input` 将没有下划线。
endAdornment	node	-	此组件的结尾 `InputAdornment`。
error	bool	-	如果为 `true`，则 `input` 将指示错误。此 prop 默认为从父 FormControl 组件继承的值 (`false`)。
fullWidth	bool	false	如果为 `true`，则 `input` 将占据其容器的完整宽度。
id	string	-	`input` 元素的 id。
inputComponent	elementType	'input'	用于 `input` 元素的组件。可以是用于 HTML 元素的字符串或组件。
inputProps	object	{}	Attributes 应用于 `input` 元素。
inputRef	ref	-	将 ref 传递给 `input` 元素。
margin	'dense' \| 'none'	-	如果为 `dense`，将调整垂直间距。这通常通过 FormControl 的上下文获得。此 prop 默认为从父 FormControl 组件继承的值 (`'none'`)。
maxRows	number \| string	-	当 multiline 选项设置为 true 时，要显示的最大行数。
minRows	number \| string	-	当 multiline 选项设置为 true 时，要显示的最小行数。
multiline	bool	false	如果为 `true`，则渲染 TextareaAutosize 元素。
name	string	-	`input` 元素的 Name 属性。
onChange	func	-	当值更改时触发的回调。签名：`function(event: React.ChangeEvent) => void` `event` 回调的事件源。您可以通过访问 `event.target.value` (字符串) 拉取新值。
placeholder	string	-	在用户输入值之前，`input` 中显示的简短提示。
readOnly	bool	-	它阻止用户更改字段的值（而不是与字段交互）。
required	bool	-	如果为 `true`，则 `input` 元素为必需。此 prop 默认为从父 FormControl 组件继承的值 (`false`)。
rows	number \| string	-	当 multiline 选项设置为 true 时，要显示的行数。
slotProps	{ input?: object, root?: object }	{}	插槽组件的额外 props。您可以覆盖现有 props 或添加新的 props。此 prop 是 `componentsProps` prop 的别名，该 prop 将在未来被弃用。
slots	{ input?: elementType, root?: elementType }	{}	用于内部每个插槽的组件。此 prop 是 `components` prop 的别名，该 prop 将在未来被弃用。
startAdornment	node	-	此组件的起始 `InputAdornment`。
sx	Array<func \| object \| bool> \| func \| object	-	系统 prop，允许定义系统覆盖以及其他 CSS 样式。有关更多详细信息，请参见 `sx` 页面。
type	string	'text'	`input` 元素的类型。它应该是有效的 HTML5 input 类型。
value	any	-	`input` 元素的值，受控组件必需。

ref 被转发到根元素。

继承

虽然上面没有明确文档说明，但 InputBase 组件的 props 在 Input 中也可用。您可以利用这一点来定位嵌套组件。

主题默认 props

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

CSS 类

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

类名	规则名称	描述
.Mui-disabled		如果 `disabled={true}`，则应用于根元素的样式。
.Mui-error		如果 `error={true}`，则应用于根元素的状态类。
.Mui-focused		如果组件获得焦点，则应用于根元素的样式。
.MuiInput-colorSecondary	colorSecondary	如果颜色为 secondary，则应用于根元素的样式。
.MuiInput-formControl	formControl	如果组件是 `FormControl` 的后代，则应用于根元素的样式。
.MuiInput-fullWidth	fullWidth	如果 `fullWidth={true}`，则应用于根元素的样式。
.MuiInput-input	input	应用于 input 元素的样式。
.MuiInput-inputAdornedEnd	inputAdornedEnd	如果提供了 `endAdornment`，则应用于 input 元素的样式。
.MuiInput-inputAdornedStart	inputAdornedStart	如果提供了 `startAdornment`，则应用于 input 元素的样式。
.MuiInput-inputMultiline	inputMultiline	如果 `multiline={true}`，则应用于 input 元素的样式。
.MuiInput-inputSizeSmall	inputSizeSmall	如果 `size="small"`，则应用于 input 元素的样式。
.MuiInput-inputTypeSearch	inputTypeSearch	如果 `type="search"`，则应用于 input 元素的样式。
.MuiInput-multiline	multiline	如果 `multiline={true}`，则应用于根元素的样式。
.MuiInput-root	root	应用于根元素的样式。
.MuiInput-sizeSmall	sizeSmall	如果 `size="small"`，则应用于 input 元素的样式。
.MuiInput-underline	underline	除非 `disableUnderline={true}`，否则应用于根元素的样式。

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

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

源代码

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