跳到主要內容
+

文字欄位

文字欄位讓使用者輸入和編輯文字。

遷移

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 樣式。此元件的無樣式版本是高度客製化和更小 bundle 大小的理想選擇。