材质UI InputLabel-输入为空时禁用动画

Question

当我的输入字段为空且未聚焦时，Material UI会将标签放置在输入字段中作为占位符。

我想要的是，始终使标签位于输入字段上方，这与选择输入字段时的外观类似。

我该怎么做？

示例代码：

     <FormControl>
        <InputLabel htmlFor="name">Name</InputLabel>
        <Input name="name"
               value={name}/>
      </FormControl>

Answer 1

对于那些寻求使用TextField组件来实现这一目标的人，这里：

<TextField
  variant="outlined"
  InputLabelProps={{
    shrink: true,
  }}
/>

Answer 2

拉了30分钟后，我终于明白了。正如您可能认为的那样，您要查找的属性未称为disableAnimation，而是shrink属性。 API文档-https://material-ui.com/api/input-label/

  <FormControl>
    <InputLabel htmlFor="name" shrink='true'>Name</InputLabel>
    <Input name="name"
           value={name}/>
  </FormControl>