Material UI 5 学习03-Text Field文本输入框

原创

已于 2024-03-11 20:15:14 修改 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ui

于 2024-03-10 22:17:03 首次发布

文章介绍了MUI库中TextField组件的基础示例、表单属性如required、defaultValue、disabled等，以及验证功能，同时展示了如何创建多行文本输入。详细讲解了不同variant类型和一些关键属性的用法。

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

Text Field文本输入框

一、最基本的本文输入框
二、多行文本

一、最基本的本文输入框

1、基础示例

import {
   
   Box, TextField} from "@mui/material";
function App() {
   
   
    return (
        <Box sx={
   
   {
   
   '& > :not(style)': {
   
   m: 1, width: '25ch'}}}>
            <TextField id="outlined-basic" label="我的输入框" variant="outlined"/>
            <TextField id="filled-basic" label="Filled" variant="filled"/>
            <TextField id="standard-basic" label="Standard" variant="standard"/>
        </Box