跳到主要内容跳到主要内容

InputLabel(输入标签)API

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

演示

导入

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

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

Props(属性)

FormLabel 组件的 props 也可用。

名称类型默认值描述
children(子节点)node-

组件的内容。

classes(类)object-

覆盖或扩展应用于组件的样式。

有关更多详细信息,请参阅下面的CSS 类 API

color(颜色)'error'
| 'info'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| string
-

组件的颜色。它支持默认主题颜色和自定义主题颜色,可以按照调色板自定义指南中所示的方式添加。

disableAnimation(禁用动画)boolfalse

如果 true,则禁用过渡动画。

disabled(禁用)bool-

如果 true,则组件被禁用。

error(错误)bool-

如果 true,则标签以错误状态显示。

focused(聚焦)bool-

如果 true,则此标签的 input 获得焦点。

margin(外边距)'dense'-

如果为 dense,将调整垂直间距。这通常通过 FormControl 的上下文获得。

required(必填)bool-

如果 true,标签将指示 input 是必填项。

shrink(收缩)bool-

如果 true,则标签会收缩。

size(尺寸)'medium'
| 'small'
| string
'medium'

组件的尺寸。

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

允许定义系统 overrides 以及其他 CSS 样式的系统属性。

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

variant(变体)'filled'
| 'outlined'
| 'standard'
-

要使用的变体。

ref 被转发到根元素。

继承

虽然上面没有明确记录,但 FormLabel 组件的 props 在 InputLabel 中也可用。您可以利用这一点来定位嵌套组件

主题默认 props

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

CSS 类

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

类名规则名称描述
.Mui-disabled如果 disabled={true},则应用于根元素的状态类。
.Mui-error如果 error={true},则应用于根元素的状态类。
.Mui-focused如果 focused={true},则应用于根元素的状态类。
.Mui-required如果 required={true},则应用于根元素的状态类。
.MuiInputLabel-animatedanimated除非 disableAnimation={true},否则应用于输入元素的样式。
.MuiInputLabel-asteriskasterisk应用于星号元素的状态类。
.MuiInputLabel-filledfilled如果 variant="filled",则应用于根元素的样式。
.MuiInputLabel-formControlformControl如果组件是 FormControl 的后代,则应用于根元素的样式。
.MuiInputLabel-outlinedoutlined如果 variant="outlined",则应用于根元素的样式。
.MuiInputLabel-rootroot应用于根元素的样式。
.MuiInputLabel-shrinkshrink(收缩)Styles applied to the input element if shrink={true}.
.MuiInputLabel-sizeSmallsizeSmall如果 size="small",则应用于根元素的样式。
.MuiInputLabel-standardstandard如果 variant="standard",则应用于根元素的样式。

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

源代码

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