如何在React Material UI TextField出现错误提示文本时修改边框颜色

完全可以实现，按以下步骤调整即可： #

第一步：修改TextField组件代码 #

给组件添加error属性，关联错误状态，触发MUI内置的错误状态类：

<TextField
  id="form-el-2 outlined-basic"
  name="userName"
  variant="outlined"
  placeholder="Please enter valid password"
  // 新增error属性，判断是否处于错误状态
  error={Boolean(errorMsgs.userNameErr?.length)}
  helperText={
    errorMsgs.userNameErr?.length ? errorMsgs.userNameErr : null
  }
  onChange={handleChange}
  value={cabinetInfo.userName}
/>

第二步：调整SCSS样式 #

分别定义错误状态下非聚焦、聚焦的样式效果：

// 错误状态下非聚焦的边框样式
.MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: #f44336; // 自定义错误状态边框颜色，可按需调整
}

// 错误状态下聚焦的样式：红边框+蓝外轮廓
.MuiOutlinedInput-root.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #f44336; // 红色边框
  outline: 1px solid $primary-color !important; // 蓝色外轮廓，$primary-color替换为你实际的蓝色变量值
  outline-offset: 1px;
}

// 可选：自定义错误提示文字的颜色
.MuiFormHelperText-root.Mui-error {
  color: #f44336;
}

如果不需要全局生效，只想给当前组件的TextField生效，可以给组件外层加自定义类名，比如外层div加custom-form-item，然后SCSS样式前面都加上.custom-form-item 前缀即可，避免污染全局MUI样式。

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