将 ErrorText 添加到 Material-ui Textfield 会移动其他元素

Question

我在 React 应用程序中有一个注册表单。我正在使用 Material-ui TextField 并使用 errorText 属性在输入中有错误时添加消息。

errorText={this.state.messages.emailMessage}

state.messages.emailMessage 最初设置为 null，因此 TextField 在首次呈现输入时没有用于消息的额外空间。

添加消息后，它会移动其他元素。

如果需要，如何为新节点留出空间，以便其他元素不被移动？我尝试将消息的初始状态设置为“ ”，但这会将输入颜色设置为红色以表示错误，并且无论如何都不起作用！

Answer 1

helperText当没有消息显示时，您可以通过将 等于空白来将它们设置为固定高度。

<TextField helperText={error ? error.message : ' '} />

Answer 2

您可以只使用errorStyle设置绝对位置的属性。这就是我在项目中解决这些问题的方法。