当文本字段没有值时，将材料UI文本字段标签保持在顶部

Question

因此，这应该很简单，但我看不出明确的答案。 我的标签看起来像这样：

。

您可以看到底部2个字段的顶部带有标签，因为它们具有默认值，而“ ML功能”的顶部则没有，并且标签移至文本字段的中间。

代码如下：

<TextField
    label="ML Features" // or any other field
    ...
   >
</TextField>

如何使标签始终位于顶部？

Answer 1

您可以在shrink中将true设置为InputLabelProps。有关更多参考，请参见InputLabel API here。

<TextField label="ML Features" InputLabelProps={{ shrink: true }} />