Being a web-developer means you are often faced with challenges, that may require you to twist the arm of various tools in order to get the desired results. Recently at work i was faced with a task that required me to use one of these tools. The tool itself being Material UI, a powerful React UI Framework. I had to change the color of a search bar from green to grey when the state is focused. Seems easy enough or at least it sounds like it should be. Looking through the documentation offered turned out to be a dead end.

I talked to other developers who also said they had experienced the same challenges while working with Material. So here we are i thought it would be a good idea to just share my findings.

As an example i will use this input field which is grey in it's initial state but changes to blue when the state is focused as such

the code that displays this input field is this

       <TextField
            style={{ marginTop: '30px' }}
            id='outlined-basic'
            label='Phone'
            variant='outlined'
            value={this.state.phone}
            type={'phone'}
            onChange={this.handlePhoneChange}
          />

The Challenge

Now i will change the color of the input to red when the state is focused. The first idea would be to try and change the borderColor by accessing the inline-style or className but that will not work. Because that style will only be applied to the root element of the MUI component. Like so

The element that we want to access in order to change the color of the element is a child within the the root div and it is called fieldset displayed here

The Solution

A quick way is to use the ruleName notchedOutline and the class focused. Set them through inputProps on the component and access the classes.

     <TextField
            style={{ marginTop: '30px' }}
            id='outlined-basic'
            label='Phone'
            variant='outlined'
            value={this.state.phone}
            type={'phone'}
            onChange={this.handlePhoneChange}
            InputProps={{
              classes: {
                root: classes.root,
                focused: classes.focused,
                notchedOutline: classes.notchedOutline,
              }
            }}

          />

you can destructure the classes through props so as to use them like the code snippet above. Finally the css styles. We need to have the root styles with both the ruleName notchedOutline and focused. It is here that we add the changes we want which is to make borderColor red. Then set the focused and notchedOutline to empty.

root: {
  '&$focused $notchedOutline': {
      borderColor: 'red',
      borderWidth: 1,
 },
notchedOutline: {},
focused: {}
      }

With that we have our end result

Hope this was helpful thank you. Keep Coding.