#javascript #reactjs #material-ui
Вопрос:
Метка ввода пользовательского интерфейса материала не выравнивается должным образом
Я хотел добавить поле пароля для аутентификации при регистрации, но метка поля пароля не выровнена должным образом, как показано на рисунке
<div className="register">
<h2>
<OfflineBoltRoundedIcon
sx={{ fontSize: '3.5rem', position: 'relative', top: '1rem' }}
/>
Electrify
</h2>
<h1>Sign up with your email address</h1>
<FormControl sx={{ m: 1, width: '20rem' }} variant="outlined">
<p>What's your email?</p>
<TextField
id="email"
label="Email"
variant="outlined"
color="secondary"
name="email"
fullWidth
/>
<p>Create a password</p>
<InputLabel htmlFor="outlined-adornment-password" color="secondary">
Password
</InputLabel>
<OutlinedInput
id="outlined-adornment-password"
type={values.showPassword ? 'text' : 'password'}
value={values.password}
onChange={handleChange('password')}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{values.showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
label="Password"
color="secondary"
aria-describedby="outlined-password-helper-text"
/>
<FormHelperText id="outlined-password-helper-text">
Enter a 6 digit password
</FormHelperText>
</FormControl>
</div>
Комментарии:
1. Я думаю, вам нужно завернуть
InputLabel
иOutlinedInput
в аFormControl
, чтобы он правильно выровнялся. В качестве альтернативы вы также можете добавить украшения в стандартTextField
.2. О, спасибо, я пропустил обертку FormControl, но это портит весь дизайн, как будто они идут в одной строке, но использование украшений в текстовом поле как мы можем использовать эту опору, не указанную в документах
3. Вы можете передать объект в
InputProps
реквизитеTextField
, сendAdornment: <InputAdornment position="end">...</InputAdornment>
помощью пары ключ-значение. Проверьте 2-й пример здесь4. Спасибо @kausko, что решили мою проблему, преобразовав ввод пароля в текстовое поле, но они также должны обновить код в документах о вводе пароля … является ли это открытым исходным кодом, чтобы я мог открыть проблему?
5. Все примеры доступны здесь и здесь . Это открытый исходный код, но обязательно взгляните на эти ссылки, прежде чем поднимать вопрос.