当焦点和错误类打开时，如何更改 Material UI 文本字段上的自定义边框颜色？

Question

我似乎无法弄清楚当错误类和焦点类打开时如何更改文本字段输入的颜色。我尝试了一些样式，但无法正确使用。 我缺少什么？有人可以向我解释一下我必须针对哪一类吗？我对 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",
  },
}));

Answer 1

终于找到解决办法了。必须添加这个选择器：

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