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
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
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
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
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.