文本字段
文本字段允许用户输入和编辑文本。
迁移
Codemod
在你的项目终端中运行这个 codemod
npx @mui/codemod@latest v5.0.0/joy-text-field-to-input <path>
它将遍历 <path>
下的所有文件,并将 <TextField />
替换为 <Input />
组合。
手动
用组合替换 TextField
-import TextField from '@mui/joy/TextField';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import FormHelperText from '@mui/joy/FormHelperText';
+import Input from '@mui/joy/Input';
-<TextField
- id="Id"
- label="Label"
- placeholder="Placeholder"
- helperText="Help!"
- name="Name"
- type="tel"
- autoComplete="on"
- autoFocus
- error
- required
- fullWidth
- defaultValue="DefaultValue"
- size="sm"
- color="primary"
- variant="outlined"
-/>
+<FormControl
+ id="Id"
+ required
+ size="sm"
+ color="primary">
+ <FormLabel>
+ Label
+ </FormLabel>
+ <Input
+ placeholder="Placeholder"
+ name="Name"
+ type="tel"
+ autoComplete="on"
+ autoFocus
+ error
+ fullWidth
+ defaultValue="DefaultValue"
+ variant="outlined" />
+ <FormHelperText>
+ Help!
+ </FormHelperText>
+</FormControl>
无样式
使用 Base UI 文本字段 以完全拥有组件的设计,无需覆盖 Material UI 或 Joy UI 样式。这个无样式版本的组件是重度自定义和更小包大小的理想选择。