CODEWITHSUNDEEP
reactjsmaterial-uistylingreact-material-ui-form-validator
Szabi Vojtek
Szabi Vojtek

Reputation: 67

How to change the custom border color on Material UI textfield when focused and error classes are on?

I can't seem to figure out how to change the color of the textfield input when the error class and the focused class are on. I tried some stylings but could not get it right. What am I missing? Could somebody explain to me which class I have to target? I am fairly 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",
  },
}));

enter image description here

Upvotes: 0

Views: 53

Answers (1)

Szabi Vojtek
Szabi Vojtek

Reputation: 67

Finally found the solution. Had to add this selector:

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

Upvotes: 0

Related Questions