如何为Material-UI自定义表单输入添加错误状态红色边框？

没问题，我来帮你搞定这个需求！要给TextField添加错误状态下的红色边框，你可以利用Material-UI自动添加的错误状态类Mui-error，结合自定义样式来覆盖默认样式。下面是具体的实现步骤和完整代码：

关键思路 #

当你给TextField设置error={true}属性时，Material-UI会给组件的根元素加上Mui-error类名。我们只需要在自定义样式中针对这个类编写边框样式，就能实现错误状态下的红色边框效果。

完整代码示例 #

import React, { useState } from 'react';
import { withStyles } from 'material-ui/styles';
import TextField from 'material-ui/TextField';

const styles = theme => ({
  textFieldRoot: {
    padding: 0,
    'label + &': {
      marginTop: theme.spacing.unit * 3,
    },
    // 针对错误状态的样式
    '&.Mui-error': {
      '& .MuiInput-underline:before': {
        borderColor: theme.palette.error.main, // 使用主题的错误色，也可以直接写红色如'#f44336'
      },
      '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
        borderColor: theme.palette.error.main, // hover状态下的错误边框
      },
      '& .MuiInput-underline:after': {
        borderColor: theme.palette.error.main, // 聚焦状态下的错误边框
      }
    }
  },
  input: {
    borderRadius: 4,
    backgroundColor: theme.palette.common.white,
    border: '1px solid #ced4da',
    fontSize: 16,
    padding: '10px 12px',
    width: 'calc(100% - 24px)',
    transition: theme.transitions.create(['border-color', 'box-shadow']),
  },
});

const CustomTextField = ({ classes }) => {
  // 用状态管理错误状态
  const [isError, setIsError] = useState(false);
  const [value, setValue] = useState('');

  const handleBlur = () => {
    // 简单示例：当输入为空时触发错误
    if (!value.trim()) {
      setIsError(true);
    } else {
      setIsError(false);
    }
  };

  return (
    <TextField
      label="示例输入"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onBlur={handleBlur}
      error={isError}
      helperText={isError ? '此字段不能为空' : ''}
      classes={{
        root: classes.textFieldRoot,
        input: classes.input,
      }}
    />
  );
};

export default withStyles(styles)(CustomTextField);

额外说明（针对Outlined类型的TextField） #

如果你的TextField使用的是variant="outlined"类型，错误状态的样式需要调整为针对MuiOutlinedInput-notchedOutline类：

'&.Mui-error': {
  '& .MuiOutlinedInput-notchedOutline': {
    borderColor: theme.palette.error.main,
  }
}

• 使用theme.palette.error.main可以和Material-UI的主题风格保持一致，也可以直接指定具体的颜色值（比如'#ff0000'）。
• 嵌套选择器&.Mui-error加上内部类的写法，能保证自定义样式优先级足够覆盖默认样式。

这样设置后，当TextField处于错误状态时，就会显示红色边框啦！

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