如何仅在验证出错时为MUI TextField/FormControl添加左侧红边框

一、实现验证失败时的左侧红边框 #

MUI的TextField会在error属性为true时，自动给根节点加上Mui-error类，我们直接利用这个类就能精准控制错误状态下的左侧红边框：

<TextField
  // 你的其他配置（如value、onChange、helperText等）
  error={!!你的错误状态变量}
  sx={{
    // 你的基础样式
    fontSize: 20,
    color: 'black',
    // 错误状态专属样式
    '&.Mui-error': {
      borderLeft: '4px solid #d32f2f', // 采用MUI默认错误色，可自定义替换
      paddingLeft: '12px', // 避免内容被边框遮挡，可按需调整
    },
    // 若默认错误状态的边框高亮和设计冲突，可隐藏
    '&.Mui-error .MuiOutlinedInput-root': {
      '&:before, &:after': {
        borderColor: 'transparent',
      },
    },
  }}
/>

二、自定义样式的优化方式 #

你当前零散写sx样式的方式不利于复用和维护，推荐两种优化方案：

1. 抽离通用样式对象 #

把重复使用的基础样式单独存为对象，需要时直接引用：

const baseTextFieldStyle = {
  fontSize: 20,
  color: 'black',
  // 其他你常用的通用样式
};

// 使用示例
<TextField sx={baseTextFieldStyle} error={!!你的错误状态变量} />

2. 封装自定义TextField组件 #

用MUI的styled API将样式与组件绑定，后续直接使用这个自定义组件即可，无需重复写样式：

import { styled } from '@mui/material/styles';
import TextField from '@mui/material/TextField';

const StyledTextField = styled(TextField)(({ theme }) => ({
  fontSize: 20,
  color: 'black',
  // 错误状态样式直接内置
  '&.Mui-error': {
    borderLeft: `4px solid ${theme.palette.error.main}`,
    paddingLeft: theme.spacing(1),
  },
  // 其他全局自定义样式
}));

// 使用示例
<StyledTextField error={!!你的错误状态变量} helperText="你的错误提示文本" />

这种绑定方式能让样式修改更集中，后续维护成本更低。

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