Question

出现错误消息时，它将更改登录表单的宽度。短消息使它变得越来越短，越来越长。如何在不添加固定内容的情况下进行修复？

我使用FormHelperText元素来显示错误消息。在FormControl中移动FormHelperText不能解决问题。

// some code ....
  render () {
    const { email, password, error } = this.state;
    const isInvalid = password === '' || email === '';

    return (
      <Paper className={styles.paper}>
        <Avatar className={styles.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component='h1' variant='h5'>
          Login
        </Typography>
        <form onSubmit={this.onSubmit} className={styles.form}>
          <FormControl margin='normal' required fullWidth>
            <InputLabel htmlFor='email'>Email Address</InputLabel>
            <Input
              id='email'
              name='email'
              autoComplete='off'
              autoFocus value={email}
              onChange={this.onChange}
            />
          </FormControl>
          <FormControl margin='normal' required fullWidth>
            <InputLabel htmlFor='password'>Password</InputLabel>
            <Input
              name='password'
              type='password'
              id='password'
              autoComplete='off'
              value={password}
              onChange={this.onChange}
            />
          </FormControl>
          {error &&
            <FormHelperText className={styles.error} error>{error.message}</FormHelperText>
          }
          <Button
            type='submit'
            fullWidth
            variant='contained'
            color='primary'
            disabled={isInvalid}
            className={styles.formSubmitBtn}
          >
            Login
          </Button>
        </form>
      </Paper>
    );
  }

.paper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  margin-top: 20px;
}

.error {

}

.form {
  margin: 30px 30px;

  &__submit-btn {
    margin-top: 20px !important;
  }
}

short error message

default

Answer 1

您可以指定CSS中的max-width和min-width属性。他们将确保宽度保持在指定的尺寸之间。如果内容超过max-width，则会影响盒子的高度。

错误消息更改所有块的宽度。如何解决？

1 个答案: