跳到内容
+

文本字段

文本字段允许用户输入和编辑文本。

迁移

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 样式。这个无样式版本的组件是重度自定义和更小包大小的理想选择。