Summary

The website content provides guidance on customizing the border color of a Material UI TextField component in different states (disabled, focused, and hover) using various styling techniques and Material UI APIs.

Abstract

The article addresses the challenge of customizing the border color of a Material UI TextField, particularly when applying a variant and handling disabled, focused, and hover states. The author shares their experience with the lack of comprehensive documentation and presents examples of how to successfully override the default border color by targeting specific classes and pseudo-classes within the Material UI component structure. The post includes code snippets and screenshots from browser developer tools to illustrate the correct application of styles using JSS and the Material UI InputProps API. Additionally, the author recommends their book for a deeper understanding of Material UI styling and mentions alternative methods such as using the withStyles higher-order component to create customized TextField components.

Opinions

The author expresses that finding good documentation on the subject was difficult, suggesting a gap in the available resources for Material UI developers.
They imply that others may struggle with the same issue, indicating a common challenge among developers working with Material UI.
The author endorses their book as a valuable resource for gaining an in-depth understanding of Material UI styling, indicating confidence in its content.
The use of phrases like "seemingly simple task" and "trial-and-error" indicates that the process of styling the TextField component was more complex than anticipated.
The inclusion of multiple approaches to solving the styling problem suggests that the author values flexibility and thoroughness in problem-solving.
The author's tone conveys a sense of accomplishment and satisfaction in overcoming the styling challenges and sharing the solutions with the community.

Override TextField Border Color for Different States 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 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.

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.

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.

Success!

There are more examples below, but if you want to gain an in-depth understanding of Material-UI syntax and APIs for styling components, I recommend you read my book, Styling Material-UI Components (affiliate link). I cover the class object API, Styled Components, and overriding components using the theme. Furthermore, there are many more examples of custom component styling.

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: {}

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: {}

Other Override Options

Another strong alternative is to use withStyles HOC and override TextField, creating a new component.

From the docs:

const CssTextField = withStyles({
  root: {
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: 'orange',
      }
  },
})(TextField);

And a more detailed example of setting a custom margin is here. The withStyles override is useful when you are having difficulty targeting an element using the provided classes API.

Originally published at https://smartdevpreneur.com.