文字欄位
文字欄位讓使用者輸入和編輯文字。
遷移
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 大小的理想選擇。