Material UI TextField使用error属性校验如何在输入时显示红框错误提示

首先明确：你要的输入过程中实时触发错误边框的实现是完全存在的，你遇到的问题是MUI默认样式优先级导致的，按以下步骤修改即可：

原因说明 #

MUI的Outlined风格TextField默认规则中，聚焦状态下的边框样式优先级高于错误状态的边框样式，所以就算error属性已经变成true，只要输入框还在聚焦状态，默认的聚焦边框样式就会覆盖错误红色边框，只有失焦后错误样式才会显示。

修复方法 #

给TextField新增自定义样式，强制提高错误状态下的边框样式优先级，覆盖聚焦状态的默认样式：

1. 调整你当前的样式定义（如果你用的是makeStyles/styled-components都可以用类似规则）：

// makeStyles 示例
const useStyles = makeStyles(() => ({
  textField: {
    // 覆盖错误状态下的边框样式，聚焦/非聚焦都显示红色
    '& .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline': {
      borderColor: '#d32f2f !important',
    },
    '& .MuiOutlinedInput-root.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderColor: '#d32f2f !important',
    }
  }
}))

2. 你原有的TextField代码已经绑定了className={classes.textField}，不需要做其他修改，样式会自动生效。

可选校验（排除逻辑问题） #

如果修改样式后还是不生效，可以先在handleTextChange函数里打印checkedMaxTextLength的返回值，确认输入超长度时该值会立刻返回true，排除校验逻辑本身有延迟的问题。

内容的提问来源于stack exchange，提问作者R111