当文本字段没有值时，将材料UI文本字段标签保持在顶部 [英] Keep material UI textfield label on top when text field has no value

问题描述

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

So this should be simple but I don't see a clear answer. The labels I have looks like this:

.

如您所见，底部2个字段的顶部带有标签，因为它们具有默认值，而"ML功能"的顶部则带有标签.不会，标签移动到文本字段的中间.

As you can see the bottom 2 fields have the label on top since they have a default value whereas the top on "ML Features" does not and the label moves to the middle of the text field.

代码如下:

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

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

How can I keep the label always on the top?

推荐答案

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

You can set shrink to true in InputLabelProps. For more reference, see InputLabel API here.

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

这篇关于当文本字段没有值时，将材料UI文本字段标签保持在顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！