填充式输入框API

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

演示

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

文本字段

导入

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

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

属性

InputBase 组件的属性也可用。

名称	类型	默认值	描述
autoComplete	string	-	此属性帮助用户更快地填写表单，尤其是在移动设备上。名称可能会造成混淆，因为它更像是自动填充。您可以遵循规范了解更多信息。
autoFocus	bool	-	如果为 `true`，则在首次挂载期间聚焦 `input` 元素。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参见下方的CSS 类 API。
color	'primary' \| 'secondary' \| string	-	组件的颜色。它支持默认主题颜色和自定义主题颜色，可以按照调色板自定义指南中所示的方式添加。该属性默认为从父 FormControl 组件继承的值 (`'primary'`)。
components	{ Input?: elementType, Root?: elementType }	{}	用于每个内部插槽的组件。已弃用－请改用 `slots` 属性。此属性将在 v7 中移除。有关更多详细信息，请参见从已弃用的 API 迁移。
componentsProps	{ input?: object, root?: object }	{}	插槽组件的额外属性。您可以覆盖现有属性或添加新属性。已弃用－请改用 `slotProps` 属性。此属性将在 v7 中移除。有关更多详细信息，请参见从已弃用的 API 迁移。
defaultValue	any	-	默认值。当组件不受控制时使用。
disabled	bool	-	如果为 `true`，则禁用该组件。该属性默认为从父 FormControl 组件继承的值 (`false`)。
disableUnderline	bool	false	如果为 `true`，则输入框将没有下划线。
endAdornment	node	-	此组件的末尾 `InputAdornment`。
error	bool	-	如果为 `true`，则 `input` 将指示错误。该属性默认为从父 FormControl 组件继承的值 (`false`)。
fullWidth	bool	false	如果为 `true`，则 `input` 将占据其容器的全部宽度。
hiddenLabel	bool	false	如果为 `true`，则标签将被隐藏。这用于增加 `FilledInput` 的密度。请务必将 `aria-label` 添加到 `input` 元素。
id	string	-	`input` 元素的 id。
inputComponent	elementType	'input'	用于 `input` 元素的组件。可以是用于 HTML 元素的字符串或组件。
inputProps	object	{}	应用于 `input` 元素的属性。
inputRef	ref	-	将 ref 传递给 `input` 元素。
margin	'dense' \| 'none'	-	如果为 `dense`，将调整垂直间距。这通常通过 FormControl 的上下文获得。该属性默认为从父 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` 元素为必填项。该属性默认为从父 FormControl 组件继承的值 (`false`)。
rows	number \| string	-	当 multiline 选项设置为 true 时，要显示的行数。
slotProps	{ input?: object, root?: object }	{}	插槽组件的额外属性。您可以覆盖现有属性或添加新属性。此属性是 `componentsProps` 属性的别名，该属性将来将被弃用。
slots	{ input?: elementType, root?: elementType }	{}	用于每个内部插槽的组件。此属性是 `components` 属性的别名，该属性将来将被弃用。
startAdornment	node	-	此组件的开始 `InputAdornment`。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统属性。有关更多详细信息，请参见 `sx` 页面。
type	string	'text'	`input` 元素的类型。它应该是有效的 HTML5 输入类型。
value	any	-	`input` 元素的值，受控组件必需。

ref 被转发到根元素。

继承

虽然上面没有明确记录，但 InputBase 组件的属性在 FilledInput 中也可用。您可以利用这一点来定位嵌套组件。

主题默认属性

您可以使用 MuiFilledInput 通过主题更改此组件的默认属性。

CSS 类

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

类名	规则名称	描述
.Mui-disabled		如果 `disabled={true}`，则应用于根元素的状态类。
.Mui-error		如果 `error={true}`，则应用于根元素的状态类。
.Mui-focused		如果组件获得焦点，则应用于根元素的状态类。
.MuiFilledInput-adornedEnd	adornedEnd	如果提供了 `endAdornment`，则应用于根元素的样式。
.MuiFilledInput-adornedStart	adornedStart	如果提供了 `startAdornment`，则应用于根元素的样式。
.MuiFilledInput-colorSecondary	colorSecondary	如果颜色为 secondary，则应用于根元素的样式。
.MuiFilledInput-hiddenLabel	hiddenLabel	如果 `hiddenLabel={true}`，则应用于根元素的样式。
.MuiFilledInput-input	input	应用于 input 元素的样式。
.MuiFilledInput-multiline	multiline	如果 `multiline={true}`，则应用于根元素的样式。
.MuiFilledInput-root	root	应用于根元素的样式。
.MuiFilledInput-sizeSmall	sizeSmall	如果 `size="small"`，则应用于根元素的样式。
.MuiFilledInput-underline	underline	除非 `disableUnderline={true}`，否则应用于根元素的样式。

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

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

源代码

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