How can the border color of a FormControl be modified using MUI?

edit

The border color of a FormControl can be modified using the MUI makeStyles hook and overriding the CSS rules for the focused and error states of the FormControl.

Here is an example code snippet:

import { makeStyles } from '@material-ui/core/styles';
import { FormControl, InputLabel, Input } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  formControl: {
    '& .MuiInput-underline:after': {
      borderBottomColor: theme.palette.secondary.main, // focused color
    },
    '& .MuiFormLabel-root.Mui-error': {
      color: theme.palette.error.main, // error color
    },
    '& .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline': {
      borderColor: theme.palette.error.main, // error color
    },
  },
}));

function MyComponent() {
  const classes = useStyles();

  return (
    <FormControl className={classes.formControl} variant="outlined" error>
      <InputLabel>My Label</InputLabel>
      <Input />
    </FormControl>
  );
}

In the example code above:

• The makeStyles hook is used to define the CSS rules for the FormControl.
• The formControl class is applied to the FormControl component.
• The & .MuiInput-underline:after rule sets the color of the border when the input is in the focused state.
• The & .MuiFormLabel-root.Mui-error rule sets the color of the label when the FormControl has an error.
• The & .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline rule sets the color of the outline when the FormControl has an error.