Блог

Главная - Вопросы по программированию - Метка ввода пользовательского интерфейса материала не выравнивается должным образом

Метка ввода пользовательского интерфейса материала не выравнивается должным образом

#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. Все примеры доступны здесь и здесь . Это открытый исходный код, но обязательно взгляните на эти ссылки, прежде чем поднимать вопрос.

Метки: