MUI: How to change the focused color of a TextField?

We Are Going To Discuss About How can I change the focused color of a TextField?. So lets Start this ReactJS Article.

How can I change the focused color of a TextField?

How to solve MUI: How to change the focused color of a TextField?

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

MUI: How to change the focused color of a TextField?

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

Solution 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

Edit ColorTextFields Material Demo (forked)

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

Edit 67139471/how-to-change-the-focused-color-of-a-react-material-ui-textfield

Original Author NearHuscarl Of This Content

Solution 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 had this to the style variable:

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

Original Author robinood Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

ittutorial team

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment