Can't Change Border Color of Material-Ui Outlinedinput

Can't change border color of Material-UI OutlinedInput

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

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@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: {}
}));

export default function SimpleSelect() {
  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);
  }, []);

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

  return (
    <form className={classes.root} autoComplete="off">
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel ref={inputLabel} htmlFor="outlined-age-simple">
          Age
        </InputLabel>
        <Select
          value={values.age}
          onChange={handleChange}
          input={
            <OutlinedInput
              labelWidth={labelWidth}
              name="age"
              id="outlined-age-simple"
              classes={outlinedInputClasses}
            />
          }
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={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:

import React from "react";
import { styled } from "@material-ui/core/styles";
import { outlinedInputClasses } from "@material-ui/core/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

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

export default function SimpleSelect() {
  const [values, setValues] = React.useState({
    age: ""
  });

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

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

Change border color of MUI disabled outline input

I have done this by using the theme palatte. I am using mui 5.5.0

import {createTheme} from "@mui/material"; 
const theme = createTheme({
    palette: {
        action: {
            disabled: 'your color here e.g #000000',
        }
    },
});

By doing this, every disabled field through out the app will have the color defined in the palatte.
And if you want to do this for a single/specific input field or you want to override this palatte disabled defined color. you can do it by following:

<TextField
    value={value}
    variant="outlined"
    label="label"
    disabled
    sx={{
        "& .MuiInputBase-root.Mui-disabled": {
            "& > fieldset": {
                borderColor: "your color here e.g #8cffcb"
            }
        }
    }}
/>

Unable to change border color when focused and not focused of Material UI Input

The issue is that the .MuiInputBase-root is not a child of the root element (the .MuiOutlinedInput-root element), it's actually exactly the same element, so that layer is unnecessary. Also, type selectors (e.g. fieldset) have lower specificity than class selectors, so &.Mui-focused fieldset does not have sufficient specificity to override the default focused styles. Instead of fieldset you can use the class selector .MuiOutlinedInput-notchedOutline.

So instead of:

root: {
  "& .MuiInputBase-root": {
    "& fieldset": {
      borderColor: "blue"
    },
    "&.Mui-focused fieldset": {
      borderColor: "red"
    }
  }
}

You should have:

  root: {
    "& .MuiOutlinedInput-notchedOutline": {
      borderColor: "blue"
    },
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "red"
    }
  }

Related answer: Change border color on Material-UI TextField

How to change the border color of MUI TextField

You can override all the class names injected by Material-UI thanks to the classes property.
Have a look at overriding with classes section and the implementation of the component for more detail.

and finally :

The API documentation of the Input React component. Learn more about the properties and the CSS customization points.

Change border color on Material-UI TextField

Below is a v4 example (v5 example further down) of how to override the color of the outline, label, and input text on the outlined variant of TextField. This shows using three different colors: one for the default (green), one for hover (red), and a different one when the input has focus (purple).

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "green"
    },
    "&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "red"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "purple"
    },
    "& .MuiOutlinedInput-input": {
      color: "green"
    },
    "&:hover .MuiOutlinedInput-input": {
      color: "red"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-input": {
      color: "purple"
    },
    "& .MuiInputLabel-outlined": {
      color: "green"
    },
    "&:hover .MuiInputLabel-outlined": {
      color: "red"
    },
    "& .MuiInputLabel-outlined.Mui-focused": {
      color: "purple"
    }
  }
});

function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <TextField
        className={classes.root}
        defaultValue="My Default Value"
        variant="outlined"
        label="My Label"
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

---

Below is a similar example using v5 of MUI. This uses styled instead of makeStyles and leverages a more type-safe manner (added in v5) for referencing the global class names (e.g. .${outlinedInputClasses.root}), but continuing to hard-code the global class names (e.g. .MuiOutlinedInput-root) still works fine as well (it's simpler syntax when hard-coded, but less protection from typos and no autocomplete help).

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@mui/material/TextField";
import { outlinedInputClasses } from "@mui/material/OutlinedInput";
import { inputLabelClasses } from "@mui/material/InputLabel";
import { styled } from "@mui/material/styles";

const StyledTextField = styled(TextField)({
  [`& .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline}`]: {
    borderColor: "green"
  },
  [`&:hover .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline}`]: {
    borderColor: "red"
  },
  [`& .${outlinedInputClasses.root}.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
    borderColor: "purple"
  },
  [`& .${outlinedInputClasses.input}`]: {
    color: "green"
  },
  [`&:hover .${outlinedInputClasses.input}`]: {
    color: "red"
  },
  [`& .${outlinedInputClasses.root}.${outlinedInputClasses.focused} .${outlinedInputClasses.input}`]: {
    color: "purple"
  },
  [`& .${inputLabelClasses.outlined}`]: {
    color: "green"
  },
  [`&:hover .${inputLabelClasses.outlined}`]: {
    color: "red"
  },
  [`& .${inputLabelClasses.outlined}.${inputLabelClasses.focused}`]: {
    color: "purple"
  }
});

function App() {
  return (
    <div className="App">
      <StyledTextField
        defaultValue="My Default Value"
        variant="outlined"
        label="My Label"
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Related answers:

• Change outline for OutlinedInput with React material-ui
• How do I override hover notchedOutline for OutlinedInput
• Global outlined override

How to change outline color of Material UI React input component?

Thanks to Rudolf Olah's help and pointing me in the right direction! I was able to solve the issue with the following code:

overrides: {
    MuiOutlinedInput: {
        root: {
            position: 'relative',
            '& $notchedOutline': {
                borderColor: 'rgba(0, 0, 0, 0.23)',
            },
            '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
                borderColor: '#4A90E2',
                // Reset on touch devices, it doesn't add specificity
                '@media (hover: none)': {
                    borderColor: 'rgba(0, 0, 0, 0.23)',
                },
            },
            '&$focused $notchedOutline': {
                borderColor: '#4A90E2',
                borderWidth: 1,
            },
        },
    },
    MuiFormLabel: {
        root: {
            '&$focused': {
                color: '#4A90E2'
            }
        }
    }

How to set color of border and icon in outlined materialUI input?

One way you could achieve this is with the following code:

import React from "react";
import Input from "@material-ui/core/OutlinedInput";
import InputAdornment from "@material-ui/core/InputAdornment";
import AccountCircle from "@material-ui/icons/AccountCircle";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(4),
    backgroundColor: theme.palette.common.black
  },
  input: {
    color: theme.palette.common.white,

    "&:hover $notchedOutline": {
      borderColor: theme.palette.grey[400]
    },
    "&$focused $notchedOutline": {
      borderColor: theme.palette.grey[400]
    },
  },
  notchedOutline: {
    borderColor: theme.palette.grey[400]
  },
  focused: {},
  adornedStart: {
    color: theme.palette.grey[400]
  }
}));

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

  return (
    <div className={classes.root}>
      <Input
        classes={{
          root: classes.input,
          notchedOutline: classes.notchedOutline,
          focused: classes.focused,
          adornedStart: classes.adornedStart
        }}
        name="username"
        type="text"
        placeholder="Username"
        startAdornment={
          <InputAdornment position="start">
            <AccountCircle />
          </InputAdornment>
        }
      />
    </div>
  );
}

CodeSandbox

In my example I've used Material UI's own styling solution. But there are also a lot of other ways to solve this. You could also use styled components for example.

Material UI has a great documentation. You can read a lot about styling solutions on this page. You could also change the default theme which changes the styles for all input fields. Or you could use the dark version of the Material UI theme which is already built in.

---

Related Topics