输入框
Input 组件为用户提供了一个输入和编辑文本的字段。
介绍
输入框是一个接受用户文本数据的 UI 元素。Input 组件取代了原生的 HTML <input> 标签，并提供了扩展的自定义和可访问性功能。它也可以根据需要转换为 <textarea>。
组件
import { Input } from '@mui/base/Input';
Input 的行为类似于原生的 HTML <input>，除了它嵌套在根 <div> 中——详见 结构。
以下演示展示了如何创建和样式化输入组件，包括 placeholder 文本
结构
Input 组件由一个根 <div> 插槽组成，该插槽容纳一个内部 <input> 插槽
<div class="base-Input-root">
<input class="base-Input-input" />
</div>
自定义结构
使用 slots 属性覆盖根插槽或任何其他内部插槽
<Input slots={{ root: 'aside', input: CustomInput }} />
使用 slotProps 属性将自定义属性传递给内部插槽。以下代码片段将一个名为 my-input 的 CSS 类应用于 input 插槽
<Input slotProps={{ input: { className: 'my-input' } }} />
与 TypeScript 一起使用
在 TypeScript 中，您可以将 slots.root 中使用的自定义组件类型指定为非样式化组件的泛型参数。这样，您可以安全地在组件上直接提供自定义根组件的属性
<Input<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
这同样适用于特定于自定义原始元素的属性
<Input<'textarea'> slots={{ root: 'textarea' }} rows={2} />
Hook
import { useInput } from '@mui/base/useInput';
useInput Hook 让您可以将 Input 的功能应用于完全自定义的组件。它返回要放置在自定义组件上的属性，以及表示组件内部状态的字段。
下面的演示展示了如何使用 useInput Hook 创建一个接收所有必要属性的自定义输入组件
自定义
装饰
您可以使用 startAdornment 和 endAdornment 属性向 Input 添加前缀、后缀或操作。装饰的常见用例包括
- 当 Input 接收到特定的计量单位（如重量或货币）时
- 当图标按钮切换显示/隐藏密码时
以下演示展示了这两种用例的示例
多行
multiline 属性将 <input> 字段转换为 <textarea> 元素，如下所示
如果您希望 <textarea> 随着内容增长，您可以在输入框中使用 Textarea Autosize 组件。
当使用 Textarea Autosize 时，除非您设置 rows 属性，否则 <textarea> 元素的高度会动态匹配其内容。要设置最小和最大尺寸，请添加 minRows 和 maxRows 属性。
以下演示展示了如何将 Textarea Autosize 组件插入到 Input 中，使其高度随着内容长度增长