跳到内容跳到内容
🚀 影响 Joy UI 2025 年路线图！参与最新的开发者调查

InputAPI

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

演示

导入

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

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

Props

名称类型默认值描述
classNamestring-

应用于根元素的 Class name。

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		'neutral'

组件的颜色。它支持对该组件有意义的主题颜色。

要了解如何添加您自己的颜色，请查看主题组件—扩展颜色。

endDecoratornode-

此 input 的尾部装饰。

errorboolfalse

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

fullWidthboolfalse

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

size'sm'
| 'md'
| 'lg'
| string		'md'

组件的大小。

要了解如何向组件添加自定义尺寸，请查看主题组件—扩展尺寸。

startDecoratornode-

此 input 的前导装饰。

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

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

有关更多详细信息，请参阅 `sx` 页面。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| string		'outlined'

要使用的全局 variant。

要了解如何添加您自己的 variants，请查看主题组件—扩展 variants。

ref 被转发到根元素。

主题默认 props

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

Slots

要了解如何自定义 slot，请查看覆盖组件结构指南。

Slot nameClass nameDefault component描述
root.MuiInput-root'div'渲染 root 的组件。
input.MuiInput-input'input'渲染 input 的组件。
startDecorator.MuiInput-startDecorator'div'渲染 start decorator 的组件。
endDecorator.MuiInput-endDecorator'div'渲染 end decorator 的组件。

CSS classes

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

Class nameRule name描述
.Mui-disabled如果 disabled={true}，则应用于根元素的 Class name。
.Mui-error如果 error={true}，则应用于根元素的状态 class。
.Mui-focused如果组件获得焦点，则应用于根元素的 Class name。
.MuiInput-colorContextcolorContext当颜色反转被触发时，应用于根元素的 Class name。
.MuiInput-colorDangercolorDanger如果 color="danger"，则应用于根元素的 Class name。
.MuiInput-colorNeutralcolorNeutral如果 color="neutral"，则应用于根元素的 Class name。
.MuiInput-colorPrimarycolorPrimary如果 color="primary"，则应用于根元素的 Class name。
.MuiInput-colorSuccesscolorSuccess如果 color="success"，则应用于根元素的 Class name。
.MuiInput-colorWarningcolorWarning如果 color="warning"，则应用于根元素的 Class name。
.MuiInput-formControlformControl如果组件是 FormControl 的后代，则应用于根元素的 Class name。
.MuiInput-fullWidthfullWidth如果 fullWidth={true}，则应用于根元素的 Class name。
.MuiInput-sizeLgsizeLg如果 size="lg"，则应用于根元素的 Class name。
.MuiInput-sizeMdsizeMd如果 size="md"，则应用于根元素的 Class name。
.MuiInput-sizeSmsizeSm如果 size="sm"，则应用于根元素的 Class name。
.MuiInput-variantOutlinedvariantOutlined如果 variant="outlined"，则应用于根元素的 Class name。
.MuiInput-variantPlainvariantPlain如果 variant="plain"，则应用于根元素的 Class name。
.MuiInput-variantSoftvariantSoft如果 variant="soft"，则应用于根元素的 Class name。
.MuiInput-variantSolidvariantSolid如果 variant="solid"，则应用于根元素的 Class name。

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

源代码

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