How to Override TextField Border Color in Material UI

I spent quite a few hours recently on a seemingly simple task: customizing the border color of a Material UI TextField when a variant and disabled state were applied. It was difficult to find good documentation and I expect others may benefit from a few examples presented here.

Override TextField Border in Disabled State

(YouTube video version of this article here)

Let’s start with a pretty simple disabled TextField component.

<TextField
disabled
variant='outlined'
label='Text Field 1'
InputProps={{
classes: {
root: classes.root
}
}}
/>

Initially, it seems we should just add a borderColor to our root class in our JSS file:

root: {
borderColor: 'orange'
}

We see it applied in dev tools, yet we don’t see an orange border around the TextField. Unfortunately, targeting the root class applies the borderColor to an inner element of the TextField that doesn’t actually control the border color.

Image for post
Dev tools with root targeted

So let’s try again via trial-and-error. Let’s select the input element which is a child of the div previously targeted:

//component
InputProps={{
   classes: {
      root: classes.root,
      disabled: classes.disabled
   }
}}

//styles
root: {
   '& $disabled': {
      borderColor: 'orange'
   }
},
disabled: {}

Still no luck. The input is targeted properly, but the border is not yet orange.

Image for post
Dev tools with root and .disabled targeted

Trying again, let’s target the fieldset. It looks promising since it has a class named MuiOutlinedInput-notchedOutline. We target it with the following:

//component
InputProps={{
   classes: {
      root: classes.root,
      disabled: classes.disabled,
      notchedOutline: classes.notchedOutline
   }
}}

//styles
root: {
   '&$disabled $notchedOutline': {
      borderColor: 'orange'
   }
},
disabled: {},
notchedOutline: {}

A couple points about the code above: First, notice that there is no space between & and $disabled. Second, notice that there is a built in class called notchedOutline in the InputProps API that Material UI intends for us to target.

Image for post
Successfully overriding MUI Textfield border style

Success!

Override TextField in Focused State

Overriding the focused state style is similar:

<TextField
   disabled
   variant='outlined'
   label='Text Field 1'
   InputProps={{
      classes: {
         root: classes.root,
         focused: classes.focused,
         notchedOutline: classes.notchedOutline
      }
   }}
/>

//styles
root: {
   '&$focused $notchedOutline': {
      borderColor: 'orange'
   }
},
focused: {},
notchedOutline: {}
Image for post
focus state override

Override TextField in Hover State

Hover is a psuedo class, so the syntax is a little different:

<TextField
   disabled
   variant='outlined'
   label='Text Field 1'
   InputProps={{
      classes: {
         root: classes.root,
         notchedOutline: classes.notchedOutline
      }
   }}
/>

//styles
root: {
  '&:hover $notchedOutline': {
    borderColor: 'orange'
  }
},
focused: {},
notchedOutline: {}

Custom TextField with Styled Components

Another strong alternative is to use styled-components, a third-party styling library with even more downloads than JSS. With styled-components, you override TextField and create a new component.

***Update for MUI v5: styled is now part of the MUI styling API. You no longer have to import a third party library

From the docs:

//This is Material-UI v4 code
import styled from "styled-components";

const StyledTextField = styled(TextField)`
  .MuiOutlinedInput-root.Mui-disabled {
      color: blue;
      & > fieldset {
          border-color: orange
      }
  }
`;

//JSX in return statement
<StyledTextField disabled variant="outlined" label="Text Field 1" />

One of the best perks of styled-components is that you can write CSS using traditional CSS syntax instead of JavaScript syntax.

Using MUI v5 sx Prop to Set TextField Border Color

The MUI v5 sx prop still uses JSS syntax. You simply add the styling directly to the prop instead of using className, useStyles, and makeStyles or withStyles.

Below is the styling for adding an orange border on hover of an “outlined” variant TextField. Notice that this one is NOT disabled. I also added width that changes based on breakpoints. The new sx prop is excellent, read about it here to learn more.

<TextField
  sx={{

    width: { sm: 250, md: 350 },

    "& .MuiOutlinedInput-root:hover": {
      "& > fieldset": {
        borderColor: "orange"
      }
    }
  }}

  variant="outlined"
/>

Resources

Are you looking for training in Material-UI? Check out my review of the 3 best Material-UI courses in Udemy, including my top pick with 40+ hours of training content. It is a fantastic value.

Read this post for more examples of customizing the TextField component.

The Autocomplete component commonly uses TextField as its renderInput component. This is a situation where understanding TextField customization can help in many parts of your UI.

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.