Can't Change Border Color Of Material-ui Outlinedinput

I'm trying to change the border color of a v4.13 MaterialUI Outlined Input. However I have not gotten anything to work when trying to override the CSS. I've tried multiple CSS rule

Solution 1:

Here's an example showing how to do this in v4 (v5 example further down):

importReactfrom"react";
import { makeStyles } from"@material-ui/core/styles";
importOutlinedInputfrom"@material-ui/core/OutlinedInput";
importInputLabelfrom"@material-ui/core/InputLabel";
importMenuItemfrom"@material-ui/core/MenuItem";
importFormControlfrom"@material-ui/core/FormControl";
importSelectfrom"@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  }
}));
const useOutlinedInputStyles = makeStyles(theme => ({
  root: {
    "& $notchedOutline": {
      borderColor: "red"
    },
    "&:hover $notchedOutline": {
      borderColor: "blue"
    },
    "&$focused $notchedOutline": {
      borderColor: "green"
    }
  },
  focused: {},
  notchedOutline: {}
}));

exportdefaultfunctionSimpleSelect() {
  const classes = useStyles();
  const outlinedInputClasses = useOutlinedInputStyles();
  const [values, setValues] = React.useState({
    age: "",
  });

  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(0);
  React.useEffect(() => {
    setLabelWidth(inputLabel.current.offsetWidth);
  }, []);

  functionhandleChange(event) {
    setValues(oldValues => ({
      ...oldValues,
      [event.target.name]: event.target.value
    }));
  }

  return (
    <formclassName={classes.root}autoComplete="off"><FormControlvariant="outlined"className={classes.formControl}><InputLabelref={inputLabel}htmlFor="outlined-age-simple">
          Age
        </InputLabel><Selectvalue={values.age}onChange={handleChange}input={
            <OutlinedInputlabelWidth={labelWidth}name="age"id="outlined-age-simple"classes={outlinedInputClasses}
            />
          }
        >
          <MenuItemvalue=""><em>None</em></MenuItem><MenuItemvalue={10}>Ten</MenuItem><MenuItemvalue={20}>Twenty</MenuItem><MenuItemvalue={30}>Thirty</MenuItem></Select></FormControl></form>
  );
}

You can read more about this in my related answers:

• Change outline for OutlinedInput with React material-ui
• Global outlined override
• Change border color on Material-UI TextField

---

Here's a similar example, but for v5 of Material-UI using styled:

importReactfrom"react";
import { styled } from"@material-ui/core/styles";
import { outlinedInputClasses } from"@material-ui/core/OutlinedInput";
importInputLabelfrom"@material-ui/core/InputLabel";
importMenuItemfrom"@material-ui/core/MenuItem";
importFormControlfrom"@material-ui/core/FormControl";
importSelectfrom"@material-ui/core/Select";

constStyledForm = styled("form")(`
  display: flex;
  flex-wrap: wrap;
`);
constStyledFormControl = styled(FormControl)(({ theme }) => ({
  margin: theme.spacing(1),
  minWidth: 120
}));
constStyledSelect = styled(Select)(`
  & .${outlinedInputClasses.notchedOutline} {
    border-color: red;
  }
  &:hover .${outlinedInputClasses.notchedOutline} {
    border-color: blue;
  }
  &.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline} {
    border-color: lime;
  }
`);

exportdefaultfunctionSimpleSelect() {
  const [values, setValues] = React.useState({
    age: ""
  });

  functionhandleChange(event) {
    setValues((oldValues) => ({
      ...oldValues,
      [event.target.name]: event.target.value
    }));
  }

  return (
    <StyledFormautoComplete="off"><StyledFormControlvariant="outlined"><InputLabelid="outlined-age-simple-label">Age</InputLabel><StyledSelectlabelId="outlined-age-simple-label"value={values.age}onChange={handleChange}name="age"label="Age"
        ><MenuItemvalue=""><em>None</em></MenuItem><MenuItemvalue={10}>Ten</MenuItem><MenuItemvalue={20}>Twenty</MenuItem><MenuItemvalue={30}>Thirty</MenuItem></StyledSelect></StyledFormControl></StyledForm>
  );
}