Material UI InputLabel - 输入为空时禁用动画答案

【问题标题】：Material UI InputLabel - disable animation when input is emptyMaterial UI InputLabel - 输入为空时禁用动画
【发布时间】：2019-07-02 09:03:40
【问题描述】：

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

我想要的是，始终将标签放在输入字段上方，类似于选择输入字段时的样子。

我该怎么做？

示例代码：

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

【问题讨论】：

标签： material-ui

【解决方案1】：

对于那些寻找如何使用TextField 组件实现此目的的人，请点击此处：

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

【讨论】：

【解决方案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>

【讨论】：