如何修改Material UI TextField聚焦且报错时的自定义边框颜色？

我无法实现当TextField同时处于**focused（聚焦）和error（报错）**状态时修改输入框边框颜色的效果，尝试了一些样式设置但未成功。刚接触Material UI，想知道遗漏了什么，以及需要定位哪个类？

代码示例 #

import { TextField } from "@mui/material";
import { styled } from "@mui/material/styles";
import "../shared/variables.css";

export const ContactInput = styled(TextField)(() => ({
  fontFamily: "Open Sans, sans serif",
  fontWeight: 700,
  "& MuiInputBase-root": {
    fontWeight: 700,
  },

  "& label": {
    letterSpacing: "1px",
    color: "var(--fontMainColor)",
    fontWeight: 600,
  },

  "& label.Mui-focused": {
    color: "var(--fontMainColor)",
    fontWeight: 600,
  },
  "& label.Mui-error": {
    color: "var(--error)",
  },

  "& .MuiOutlinedInput-root": {
    "&.Mui-focused fieldset": {
      borderColor: "var(--fontMainColor)",
      fontWeight: 600,
    },
  },

  "&.MuiOutlinedInput-notchedOutline": {
    fontWeight: 700,
  },

  "&.Mui-error .MuiOutlinedInput-notchedOutline": {
    borderColor: "green",
  },
}));

效果截图 #

问题出在选择器的优先级和组合逻辑错误，没有正确匹配同时处于聚焦和报错状态的输入框元素。

需要定位的类组合 #

当TextField同时触发focused和error状态时，.Mui-focused和.Mui-error两个类会同时添加到内部的.MuiOutlinedInput-root元素上。你需要针对这个同时拥有两个状态类的元素下的fieldset（输入框边框）设置样式。

修改后的代码 #

import { TextField } from "@mui/material";
import { styled } from "@mui/material/styles";
import "../shared/variables.css";

export const ContactInput = styled(TextField)(() => ({
  fontFamily: "Open Sans, sans serif",
  fontWeight: 700,
  // 修正选择器语法错误，补全点号
  "& .MuiInputBase-root": {
    fontWeight: 700,
  },

  "& label": {
    letterSpacing: "1px",
    color: "var(--fontMainColor)",
    fontWeight: 600,
  },

  "& label.Mui-focused": {
    color: "var(--fontMainColor)",
    fontWeight: 600,
  },
  "& label.Mui-error": {
    color: "var(--error)",
  },

  "& .MuiOutlinedInput-root": {
    // 单独聚焦状态的边框样式
    "&.Mui-focused fieldset": {
      borderColor: "var(--fontMainColor)",
      fontWeight: 600,
    },
    // 单独报错状态的边框样式
    "&.Mui-error fieldset": {
      borderColor: "green",
    },
    // 同时聚焦+报错状态的边框样式（优先级更高）
    "&.Mui-focused.Mui-error fieldset": {
      borderColor: "red", // 替换为你需要的颜色
    },
  },

  "& .MuiOutlinedInput-notchedOutline": {
    fontWeight: 700,
  },
}));

关键修正点 #

1. 修正了& MuiInputBase-root的语法错误，漏写了类选择器前的点号，正确写法为& .MuiInputBase-root。
2. 调整了报错状态的选择器逻辑：.Mui-error是加在TextField根元素上，但聚焦状态的.Mui-focused是绑定在.MuiOutlinedInput-root上的，因此需要将两个状态类直接组合到.MuiOutlinedInput-root上，才能同时匹配两种状态。
3. 单独拆分了三种状态的样式（单独聚焦、单独报错、聚焦+报错），确保组合状态的样式优先级高于单一状态，覆盖Material UI默认样式。

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