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

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，就会影响框的高度。