在知道输入下帮助文本会出现在React MaterialUI v3.7中时，如何设置高度？

Question

如下所示，如果输入中的值无效，则在输入下方会出现辅助文本。

但是当有效时，将没有帮助文本。

在输入验证过程中输入跳跃。我该如何解决这个问题？

Answer 1

如果您使用的是TextField，则可以另外输入properties for the helper text：

render() {
  const errorMessage = this.state.error ? "error happened" : null;
  const helperTextProps = {
    error: this.state.error ? true : false,
    style: { minHeight: "1rem" }
  };
  return (
    <TextField label="email" helperText={errorMessage} FormHelperTextProps={helperTextProps} />
  );
}

注意：我尚未测试过此代码，只是为了了解其要点。

Answer 2

Rudolf的答案很接近您的需求，但是minHeight必须应用于TextField（如果直接使用较低级别的组件，则应应用于FormControl）而不是{{1} }，因为当辅助文字为nil时，FormHelperText组件根本不显示，因此FormHelperText无效。

这是一个可行的示例（为方便起见，我使用钩子来管理状态，因此当前仅适用于react alpha，但样式设置与此无关）：

minHeight

还有here it is在代码沙箱中。

Answer 3

已经有几年了，但我自己偶然发现了这个问题。我还希望 minHeight 根据传递给 margin 组件 (Here for more info) 的 TextField 道具动态调整。这就是我想出来的 - 希望它可以帮助其他一些人。

import React from 'react';
import { TextField, makeStyles } from '@material-ui/core';

const findMinHeight = ({ margin }) =>  
    (margin && margin.toLowerCase() === 'dense') ? '4em' : '5em';

const inputBoxMinHeight = makeStyles({
    minHeightBox: {
        minHeight: findMinHeight
    }
});

const InputExample = ({ styleVariants }) => {
    const { minHeightBox } = inputBoxMinHeight(styleVariants);

    return (
        <TextField className={ minHeightBox } margin={ styleVariants.margin } />
    );
}

export default InputExample;