将 ErrorText 添加到 material-ui 文本字段会移动其他元素

Question

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

errorText={this.state.messages.emailMessage}

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

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

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

Answer 1

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

Answer 2

最后，我将一个样式参数传递给 material-ul 组件，将错误文本设置为显示：table。这样就可以阻止它在添加时影响其他元素。

Answer 3

仅仅将位置设置为绝对位置根本不起作用。这使错误文本能够显示在输入字段上。因此，为了完美修复，我们还必须设置 bottom 一些值以使其修复。下面的例子。

errorStyle:{
      position: 'absolute',
      bottom: '-0.9rem'
    }

如其他答案设置中所述，显示 table 也有效。

所以这两种样式都有效

Answer 4

To where should this style added?

HelperText样式需要添加。这是一个例子：

const helperStyles = makeStyles(theme => ({
  root: {
      position: 'absolute',
      bottom: '1em',
  },
}))

const helperClasses = helperStyles()

<FormHelperText classes={helperClasses}>
    {helperText}
</FormHelperText>

Answer 5

对于那些需要更新答案的人（据我所知，errorText 已不再是问题），希望这会奏效：

<Box style={{ minHeight: "100px" }} >
  <TextField
    {...props}
  />
</Box>

它允许在不影响其他组件的情况下在 flexbox 内呈现错误文本消息，因此它不应该干扰它周围的东西。 CodeSandbox

Answer 6

当没有要显示的消息时，您可以通过使 helperText 等于空 space 来使它们具有固定高度。

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

Answer 7

就像@leonormes 的 post 建议的那样，将 errorStyle 属性添加到 material ui 组件并设置 display 属性到 "table" 解决了这个问题。

显示错误时，material UI 组件不再移动或未对齐。

组件最终的样子如下：

<TextField
    floatingLabelText="Name"
    value={this.state.name}
    onChange={e => this.setState({ name: e.target.value })}
    errorText={this.props.validationErrors.get('name')}
    errorStyle={{ display: "table" }}
/>

Answer 8

您可以定位 MuiFormHelperText-root class 。下面的示例是当您在 MUI makeStyles 中应用样式时，但您可以对外部 CSS 文件执行相同的操作。

'& .MuiFormHelperText-root' : {
     position : 'absolute',
     bottom : '-1rem'
 }

Answer 9

你可以这样做

  
  
  const useStyles = makeStyles({
        helperText: {
            '& .MuiFormHelperText-root': {
                height: '0',
                marginTop: '0'
            }
        }
    });
    
    
  And then add this class text field control 

  className={classes.helperText}

将 ErrorText 添加到 material-ui 文本字段会移动其他元素

Adding ErrorText to material-ui Textfield moves other elements

reactjs

material-ui