How to change border color of Material-UI TextField?

Learn to change the border color of TextField component provided by Material-UI. You will learn about 2 components here TextField, and InputBase.

Full Transcript

Hello Friends, It's harit from bonsaiilabs. In today's video I will show you one way to change the border color of Material-UI text field.

But before you see how to do that, I would like to say that use the theme colors as per the material-design guidelines. They will help you implement a consistent design across your app.

Material-UI comes with a default theme implementation out of the box that you could leverage in your projects. They also have a great extensive documentation on how you create your own theme.

So, if you have your theme set, you ideally do not need to customize the border color of a text field. But if your use case needs to, let's find out how to do that

I will go to the material-ui website and search for TextField component. Once the page opens, I will click the pencil icon, which says "Edit in CodeSandbox". This opens CodeSandbox in a new tab with the entire code for all the TextFields.

Next, I will open demo.js which contains the code for the demo, and remove the 2 text fields, keeping the outlined variant. Now, we are using useStyles React Hook for styling, so I will add a new style object called textField, and add a border property with 1px solid blue color. Then, I will add the className property to TextField component and add the value of classes.textField to it.

We can observe that out TextField now has a blue border. But as I hover, we can see that original border still exists and we got additional border on the TextField component. So, clearly, adding a border to TextField did not help.

Let's go back to material-ui documentation on TextField and look at the API section. Here, you will find InputBase component which serves as the base implementation for the TextField component. As I click on that we can see the code that explains how to import InputBase. I am now going to make use of it.

Back in the CodeSandbox, I will first add import for InputBase. Then, I will copy the current TextField component call and replace it with InputBase. As I refresh, we can now see 2 textfields, one using TextField, and another one using InputBase. We can continue to customize our textfields now. For example, adding a borderRadius property to textField style object adds radius to both text fields. However, our InputBase component looks no way closer to TextField component. So let's customize it further.

First, I will change the prop label to placeholder in InputBase because that's what it is called. Next, I will copy the textField style object and call it inputBase. Next, I will replace the className for InputBase to use classes.inputBase. Now, I will add height property to inputBase and also add padding property to it.

With that, we can see that we have changed the border of TextField component by customizing its base, which is InputBase.

Fantastic! So, next time if you need to customize a TextField component, you would know how to do it yourself.

If you have any ideas that you would like us to cover, please write in the comment below and we would be happy to create content on it.

Thank you and see you next time.