React MUI FilledInput API
Material-UI 或 MUI 是一个提供预定义的强大和可自定义组件的UI库,用于简化React的网页开发。MUI设计基于Google的Material Design。
在本文中,我们将讨论 React MUI FilledInput API 。FilledInput元素允许我们在网页上放置带有必需ID和其他类的输入元素。API提供了许多功能,我们将学习如何实现它们。
导入FilledInput API
属性: 此组件的所有可用属性。
- autoComplete(string): 它可以通过一些预定义的或以前使用过的值快速填写表单。
- autoFocus(bool): 如果设置为true,输入元素会自动聚焦。默认值为false。
- classes(object): 它覆盖或扩展组件的样式。
- color(’primary’ | ‘secondary’ | string): 组件的颜色。默认值为’primary’。
- components({ Input?, Root? }): 用于设置每个插槽内使用的组件。
- componentsProps(props): 用于应用插槽组件的props。已弃用,请使用slotProps代替。
- defaultValue (任意类型): 用于设置输入元素的默认值。
- disabled (布尔类型): 如果设置为true,则禁用输入元素。默认值为false。
- disableUnderline (布尔类型): 如果设置为true,则输入框不会有下划线。默认值为false。
- endAdornment (元素类型): 该组件的末尾输入附件。
- error (布尔类型): 如果设置为true,则输入框会提示错误。默认值为false。
- fullWidth(布尔类型):如果设置为true,则输入会占用整个宽度。默认值为false。
- hiddenLabel(bool): 如果设置为true,则标签将被隐藏。默认值为false。
- id (string): 设置元素的id。
- inputComponent(elementType): 设置输入元素的类型。默认值为’input’。
- inputProps (object): 为输入组件设置props。
- inputRef (ref): 用于传递对输入元素的引用。
- margin (dense/none): 如果设置为dense,则组件将调整垂直内边距。默认值为’none’。
- maxRows (number): 如果 multiline 设置为 true,则设置最大行数。
- minRows (number): 如果 multiline 设置为 true,则设置最小行数。
- multiline (bool): 如果设置为 true,则自动调整文本区域的大小,默认值为 false。
- name (string): 输入元素的名称。
- onChange (function): 当输入框内的值改变时调用的函数。
- placeholder (string): 设置输入框中显示的提示信息。如果设置为true,用户只能读取输入值。默认值为false。
- required (布尔值):如果设置为true,输入元素不能为空。
- rows (数字):当multiline设置为true时,显示的行数。
- slotProps(props) :用于应用slot组件的props。
- sx (Array
| function | object):该系统属性允许定义系统覆盖以及额外的CSS样式。 - type (字符串):
- type (任意): 用于设置输入元素的类型。默认值为 ‘text’。
- value (任意): 输入元素的值。
CSS规则:
- root ( .MuiFilledInput-root): 应用于根元素的样式。
- colorSecondary (.MuiFilledInput-colorSecondary): 如果颜色为secondary,则应用于根元素的样式。
- underline ( .MuiFilledInput-underline): 除非disableUnderline设置为true,否则应用于根元素的样式。
- focused (.Mui-focused): 如果组件处于聚焦状态,则应用于根元素的样式。
- disabled (.Mui-disabled): 如果disabled设置为true,则应用于根元素的样式。
- adornedStart (.MuiFilledInput-adornedStart ): 如果提供了startAdornment,则应用于根元素的样式。
- adornedEnd (.MuiFilledInput-adornedEnd ): 如果提供了endAdornment,则应用于根元素的样式。
- error (.Mui-error): 如果error为true,则应用于根元素的样式。
- sizeSmall ( .MuiFilledInput-sizeSmall): 如果大小为small,则应用于输入元素的样式。
- multiline ( .MuiFilledInput-multiline): 如果multiline为true,则应用于根元素的样式。
- hiddenLabel ( .MuiFilledInput-hiddenLabel): 如果hiddenLabel为true,则应用于根元素的样式。
- input ( .MuiFilledInput-input): 应用于输入元素的样式。
- inputSizeSmall (.MuiFilledInput-inputSizeSmall): 如果大小为small,则应用于输入元素的样式。
- inputHiddenLabel (.MuiFilledInput-inputHiddenLabel): 如果在,则应用于输入元素的样式。
- inputMultiline (.MuiFilledInput-inputMultiline): 如果multiline为true,则应用于输入元素的样式。
- inputAdornedStart (.MuiFilledInput-inputAdornedStart): 如果提供了startAdornment,则应用于输入元素的样式。
- inputAdornedEnd (.MuiFilledInput-inputAdornedEnd): 如果提供了endAdornment,则应用于输入元素的样式。
语法: 如下所示创建一个FilledInput元素:
安装和创建React应用,并添加MUI依赖:
步骤1: 使用以下命令创建一个React应用:
步骤2: 在创建您的项目文件夹(即foldername)后,使用以下命令进入该文件夹:
步骤3: 创建 ReactJS 应用程序后,使用以下命令安装所需的 MUI 依赖项:
项目结构: 它会像下面这样子。
现在让我们来看一些示例,演示如何在react中使用MUI的FilledInput组件。
示例1: 在下面的示例中,我们使用FilledInput组件创建了一个登录表单。
App.js
运行应用程序的步骤: 从项目的根目录使用以下命令运行应用程序:
“`javascript npm run start
<pre><code class="line-numbers">**输出:** 现在打开你的浏览器并访问 http://localhost:3000/,你将看到以下输出:

**示例2:** 在下面的示例中,我们将看到使用FilledInput组件进行多行输入。
**App.js**
“`javascript
import “./App.css”;
import * as React from “react”;
import Box from “@mui/material/Box”;
import FilledInput from “@mui/material/FilledInput”;
import InputLabel from “@mui/material/InputLabel”;
import FormControl from “@mui/material/FormControl”;
import { Button, Typography } from “@mui/material”;
function App() {
const [values, setValues] = React.useState({
comment: “”,
});
const handleChange = (prop) => (event) => {
setValues({ …values, [prop]: event.target.value });
};
const handleFormSubmit = (event) => {
event.preventDefault();
alert(“Signed in successfully”);
};
return (
<div className=”App”>
<div
className=”head”
style={{
width: “fit-content”,
margin: “auto”,
}}
>
<Typography
variant=”h3″
sx={{
color: “green”,
}}
>
GeeksforGeeks
</Typography>
<Typography variant=”p” fontWeight={600}>
React MUI FilledInput API
</Typography>
</div>
<br />
<Box
component=”form”
onSubmit={handleFormSubmit}
sx={{
width: “100%”,
margin: “auto”,
display: “flex”,
flexDirection: “column”,
gap: “10px”,
maxWidth: “300px”,
}}
>
<FormControl fullWidth variant=”filled”>
<InputLabel htmlFor=”comment”>Comment</InputLabel>
<FilledInput
id=”comment”
value={values.comment}
onChange={handleChange(“comment”)}
required
fullWidth
multiline
maxRows={5}
minRows={3}
/>
</FormControl>
<Button type=”submit” variant=”contained”>
Post
</Button>
</Box>
</div>
);
}
export default App;
运行应用的步骤: 从项目的根目录中使用以下命令运行应用:
输出: 现在打开你的浏览器,前往 http://localhost:3000/,你将看到以下输出:
参考: https://mui.com/material-ui/api/filled-input/