How can I change the focused color of a TextField?

Question

I am making use of Material-UI React library and I need to change the border color of a TextField when it is clicked or focused as the case maybe.

Here is what I have tried:

const useFormFieldStyles = makeStyles((theme) => ({
  input: {
    borderWidth: '1px',
    fontWeight: 'bold',
    '& .MuiOutlinedInput-input:focused': {
      borderColor: 'green',
    }
  }
}));

Yet, the borderColor is still blue despite all my efforts.

How can I make this work?

Answer 1

Material-UI v5

The easiest way to change the focus color of the TextField is to set the color props which is quite limited because it only accepts these values, (the color can be extended but you need to write a bit of code).

'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'

If you want to change to an arbitrary color, use the following code:

const CssTextField = styled(TextField, {
  shouldForwardProp: (props) => props !== "focusColor"
})((p) => ({
  // input label when focused
  "& label.Mui-focused": {
    color: p.focusColor
  },
  // focused color for input with variant='standard'
  "& .MuiInput-underline:after": {
    borderBottomColor: p.focusColor
  },
  // focused color for input with variant='filled'
  "& .MuiFilledInput-underline:after": {
    borderBottomColor: p.focusColor
  },
  // focused color for input with variant='outlined'
  "& .MuiOutlinedInput-root": {
    "&.Mui-focused fieldset": {
      borderColor: p.focusColor
    }
  }
}));

Usage

<CssTextField focusColor='red' />

Live Demo

Material-UI v4

See Customized inputs section. The example below styles the focused color border and label of the TextField in 3 variants:

const focusedColor = "orange";
const useStyles = makeStyles({
  root: {
    // input label when focused
    "& label.Mui-focused": {
      color: focusedColor
    },
    // focused color for input with variant='standard'
    "& .MuiInput-underline:after": {
      borderBottomColor: focusedColor
    },
    // focused color for input with variant='filled'
    "& .MuiFilledInput-underline:after": {
      borderBottomColor: focusedColor
    },
    // focused color for input with variant='outlined'
    "& .MuiOutlinedInput-root": {
      "&.Mui-focused fieldset": {
        borderColor: focusedColor
      }
    }
  }
});

export default function CustomizedInputs() {
  const classes = useStyles();

  return (
    <div style={{ display: "flex", columnGap: 15 }}>
      <TextField className={classes.root} variant="outlined" />
      <TextField className={classes.root} variant="standard" />
      <TextField className={classes.root} variant="filled" />
    </div>
  );
}

Live Demo

Answer 2

Now using the sx props from the Mui Textfield you can also use the following to change the color of the outline on focus:

const style = {
  "& .MuiOutlinedInput-root": {
    "&.Mui-focused fieldset": {
      borderColor: "green"
    }
  }
}    

<TextField sx={style} ...(your other props)/>

If you want to also change the color of the label when the field is focused, you can addthis to the style variable:

const style = {
  "& label.Mui-focused": {
    color: "green"
  },
  "& .MuiOutlinedInput-root": {
    "&.Mui-focused fieldset": {
      borderColor: "green"
    }
  }
}