轮廓式输入框API

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

演示

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

文本字段

导入

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

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

属性

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 迁移。
defaultValue	any	-	默认值。当组件不受控制时使用。
disabled	bool	-	如果为 `true`，则禁用组件。此属性默认为从父 FormControl 组件继承的值 (`false`)。
endAdornment	node	-	此组件的末尾 `InputAdornment`。
error	bool	-	如果为 `true`，则 `input` 将指示错误。此属性默认为从父 FormControl 组件继承的值 (`false`)。
fullWidth	bool	false	如果为 `true`，则 `input` 将占用其容器的全部宽度。
id	string	-	`input` 元素的 id。
inputComponent	elementType	'input'	用于 `input` 元素的组件。可以使用字符串来使用 HTML 元素或组件。
inputProps	object	{}	属性应用于 `input` 元素的属性。
inputRef	ref	-	将 ref 传递给 `input` 元素。
label	node	-	`input` 的标签。它仅用于布局。实际的标签由 `InputLabel` 处理。
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 属性。
notched	bool	-	如果为 `true`，则轮廓会开槽以容纳标签。
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 时，要显示的行数。
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 组件的属性在 OutlinedInput 中也可用。您可以利用这一点来定位嵌套组件。

主题默认属性

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

CSS 类

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

类名	规则名称	描述
.Mui-disabled		如果 `disabled={true}`，则应用于根元素的样式。
.Mui-error		如果 `error={true}`，则应用于根元素的状态类。
.Mui-focused		如果组件获得焦点，则应用于根元素的样式。
.MuiOutlinedInput-adornedEnd	adornedEnd	如果提供了 `endAdornment`，则应用于根元素的样式。
.MuiOutlinedInput-adornedStart	adornedStart	如果提供了 `startAdornment`，则应用于根元素的样式。
.MuiOutlinedInput-colorSecondary	colorSecondary	如果颜色为 secondary，则应用于根元素的样式。
.MuiOutlinedInput-input	input	应用于 input 元素的样式。
.MuiOutlinedInput-inputAdornedEnd	inputAdornedEnd	如果提供了 `endAdornment`，则应用于 input 元素的样式。
.MuiOutlinedInput-inputAdornedStart	inputAdornedStart	如果提供了 `startAdornment`，则应用于 input 元素的样式。
.MuiOutlinedInput-inputMultiline	inputMultiline	如果 `multiline={true}`，则应用于 input 元素的样式。
.MuiOutlinedInput-inputSizeSmall	inputSizeSmall	如果 `size="small"`，则应用于 input 元素的样式。
.MuiOutlinedInput-inputTypeSearch	inputTypeSearch	如果 `type="search"`，则应用于 input 元素的样式。
.MuiOutlinedInput-multiline	multiline	如果 `multiline={true}`，则应用于根元素的样式。
.MuiOutlinedInput-notchedOutline	notchedOutline	应用于 NotchedOutline 元素的样式。
.MuiOutlinedInput-root	root	应用于根元素的样式。
.MuiOutlinedInput-sizeSmall	sizeSmall	如果 `size="small"`，则应用于 input 元素的样式。

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

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

源代码

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