I've been struggling to change the color of the text field input when both the error and focused classes are active. Despite trying various styles, I just can't seem to get it right. Can someone help me identify which class I need to target? I'm relatively new to 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",
},
}));