Change border color on Material-UI TextField

Question

This should be simple but for some reason I can't figure out how to change the border color on a TextField

<TextField style={{ borderColor: 'white', width: '100px' }} variant="outlined" />

It's basically just copied from the docs, where on the outline is white, so I can't figure out what might be messing this up on my end.

I tried to reproduce on jsfiddle or something but couldn't find one that would allow me to import the TextField module

Solution

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

Comments

[insivika]

You're the real mvp

[Kelsey Hannan]

Do you have a solution for TextArea or TextAreaAutoSize?

[Ryan Cogswell]

@KelseyHannan I always use those via TextField with the multiline property where the styling in this answer still works.

[Kelsey Hannan]

That's a useful tip, though TextAreaAutoSize has its advantages for autosizing to the amount of text written in the box. I cannot believe such a basic feature in MUI is so fragile.

[Ryan Cogswell]

@KelseyHannan TextField uses TextareaAutosize internally when you specify the multiline property.

[Kelsey Hannan]

@RyanCogswell Omg your right. My color outlining issue actually disappeared when I changed TextAutosize to TextField with the multiline property. Must have been a bug with MUI 5.5.3 Thank you so much.