多行 TextField - 浮动标签

Question

在多行模式下使用 TextField 时，浮动标签不在左侧。它似乎没有出现在文档示例中，但是当应用那里给出的代码时，会发生以下情况：

  <TextField
  hintText="Message Field"
  floatingLabelText="MultiLine and FloatingLabel"
  multiLine={true}
  rows={2}
/>

如果不使用 multiLine 模式，则不会发生这种情况。

Answer 1

您可以像这样使用 <TextField/> 组件的 style 属性轻松解决此问题。

<TextField
  style={{textAlign: 'left'}}
  hintText="Message Field"
  floatingLabelText="MultiLine and FloatingLabel"
  multiline
  rows={2}
/>

希望这对您有所帮助。如果这不起作用，那么您可能有另一个样式规则干扰了您的 <TextField/>.

multiline TextField - floating label