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
