All language subtitles for 6. Using TextFields - Styling

For styling these inputs we're going to take a slightly different approach than we've been using so

far for styling we've really just been applying styles to certain elements except in the case of using

our typography component in which we have the pre styled variants to choose from for the inputs.

However I'm actually wanting to apply a style to every input that I create.

So all the inputs they're all going to have the exact same styles.

So I'd really just like to style the actual input component itself instead of applying styles to individual

instances of that component.

So to do this remember we can go over to our theme J.S. file and we can scroll down and this is going

to be outside of the typography section.

OK.

So outside of the typography wrapper so make sure you come all the way down and add the comma.

And now you can add an overrides section this overrides section will allow us to customize the default

components for our material UI setup here and then any time that component is rendered it will have

these styles.

So this will allow us to set up what we want our input to look like and then all of the input components

will share that same styling automatically to figure out exactly what we need to override though.

Let's go back over to the material UI documentation page real quick.

I'm here at the text fields page again.

And if we scroll all the way down to the bottom of this page just like on the bottom of every page they

have an API section and this tells you all of the components that are used to create the text field

component.

And in this case we're actually going to want to start with the input label component.

OK.

So that's going to allow us to start styling these labels right now so we can come down and we can see

here that it tells us the CSX style sheet name that we need to style this element.

So what we need to do is we can come and copy is m UI input label what's copy that and in our override

section Let's paste that in and then we will add this as a prop. here.

We will now specify the route version of this.

So the style will be applied to the root element.

So we'll select the route version of the IMU I input label.

And here we can change our color to arc blue and then set a font size of 1 Ram.

And if we go ahead and save that we can go back over to our page and you can see that the labels inside

of our text fields have now all been colored with the ARC blues style.

You can see that that is the case.

It still changes when it goes up.

Looks good now I want to come and Inara overrides section adjacent to our M UI input label so it's fine

the closing tag add a comma and let's add the M UI input so this will style just the base input component.

And here is where I can change the styling for the underline of our text input.

However to do this we have to take a couple of things into consideration the underlying actually changes

based on the state of the input.

And so right now the input is in the before state.

So this is before I have clicked on or hovered over it.

This is when it is just a default sitting there.

So if we go ahead and inside emulate input we're going to set the underlying style.

So this is going to be affecting the underline for our emulator why inputs.

And again this is from the material UI documentation.

So if I were to go to the component API and find the input I could then scroll down and find here for

these ISIS classes you can see the underline section.

And so that is where that is coming from.

I can come back to our page and we can set in this underline style.

The quote Ampersand colon before.

And then another colon and we'll open that up.

So this is like I said the styles for the before St..

So before we have clicked on it or hovered over it because you see here on hover it has an effect.

And then once it's clicked on once it's focused you can see that changes color again.

So before we have clicked on or hovered over it let's set a broader bottom and let's use the back ticks

here because we're setting multiple values here starting with the two p x specifying the thickness and

then the words solid to specify the style of the border which can be dashed as well and then do the

dollar sign.

Curly brace to inject arc blue.

And that will set the color of our border let's go ahead and save that now and we'll see the page refresh.

And you can see that all of the borders have now been correctly updated to a style matching that of

the design file however when we hover over it you can see it is still going black going to that other

color.

And when I click on it it is doing a different color still as well.

So let's go ahead and to change that other style let's add underneath the closing bracket for the before

style section and this I actually had to find online since somebody went through and found the implementation

of the input components within material UI and figured out this is how they're setting this style here.

So this is how we will overwrite it and it is with the quote Ampersand colon hover colon not parentheses

dollar sign disabled and then outside the parentheses.

Another colon not parentheses.

Dollar sign focused outside the print the C colon not parentheses.

Dollar sign error.

And then outside the parentheses.

Colon before and now we can go ahead and open this giant style up and let's go ahead and copy these

same border style on in and we can paste that and save the page will refresh.

And now when we click on the input we're still getting a darker version of it which I actually kind

of like because that does show focus.

That does show where you are but you see when we hover over it we're no longer getting that black style.

So this is correctly changing that hover style and making sure that we have the colors that we had wanted.

Let's close out of the theme J.S. file now and we'll actually take a somewhat different approach for

our message input here because we want the border to be going all the way around.

We message input container and we also we're not going to want any styling when we click into it.

I don't think we're going to really want that and you'll see in a minute how that will actually cause

some issues anyway.

So let's go ahead and we'll scroll up to the message text field in here.

Let's add a class name of classes dot message and we'll come up to our styles object and add the message

style and let's paste in that border that we had copied but get rid of the border bottom and we'll read

that as the border for the entire section and then change the arc blue to our theme dot palette dot

common dot blue now let's save that and we'll see the page refresh and you can see now the the border

is going all the way around the input but there are a couple issues first is it's way too close to the

phone input and that's causing almost a double thicker line.

Look.

So let's give it real quick a margin top of 5 m and we can save that.

We'll see that jump.

OK.

And now it's guys own space down here that looks a little better.

Next thing I want to do is go ahead and those corners how they're all sharp.

Let's go ahead and add a border radius of five.

Go ahead and save that.

Those corners are gonna be just slightly rounded and I think that looks a little bit better in my opinion.

But then we have this double thicker line here at the bottom and you can see if we go ahead and click

onto that I guess that changes colors slightly to show the focus.

And that's coming from the underline for the input component since we're setting a border around the

entire input itself.

We don't necessarily need that bottom underline.

So what we can do is scroll down to the message text field once again and let's add the input props

prop and we can set this equal to an object that will contain the props we want to pass down to the

base input component here and let's pass the disable underlying prop with the value of true.

And so if we save this the page will refresh and now that extra little line is gone because we're just

removing the underline from the input component entirely and then wrapping our text field with the border

itself and that creates the work that I think I was going for.

Now let's start getting our Send button put together.

So on our button container variant contained let's add a class name of classes dot send button and then

we can scroll up to our styles object and add these send button style extending our theme dot typography

dot estimate style with a border radius of 50 a height of forty five a width of two forty five a font

size of 1 ram a background color of theme dot palette dot com in dot orange and then let's go ahead

and remember to set R Ampersand cone hover to our background color of theme dot powered secondary dot

light as we have done previously let's save this now and the page will refresh and you can see our send

button has been perfectly styled similar to that of our estimate buttons you see how that airplane image

the paper airplane is squeezed right up against the text though let's go down and find our send a message

button and onto the image here let's give that a style of margin left 1 m let's save that.

See this jump.

And now we've got a little extra space.

Now we can start getting the message input in the phone in email and name inputs all styled correctly

to the right size of this container.

So it was started by this grid item wrapping our message text field actually this grid items.

So the grid item wrapping our message text field on that grid item.

Let's give it a style max width of 20 m and I'll go ahead and copy this style and let's scroll up to

the grid item container wrapping all these text fields and give it the same max width as well.

Let's go ahead and save that then and we'll see that refresh.

And now all of our inputs are on their own lines and we can continue styling them from here.

Now I want to point out how if we scroll the page of we resize this all the way up here then all of

our content is definitely not sitting where we would want it.

You know ideally we want this to be aligned here in the center of the section.

So it's most efficiently using the space available to it.

But if we were to try and change that.

So if we were to go over to our code and scroll up and we see that we've got a direction of column on

our container wrapping all of the Contact Us contents.

And remember how we use the justify Center to bring all the continent down here in the center this way.

Well now let's try and use the line items prop to center our content horizontally since that is the

cross axis of the direction column here.

So we'll add in a line items of center and if we save this we see the page refresh and some of our content

has jumped over.

But some of it also has not the text fields here have not correctly jumped over the phone.

Here is not jumping over and so I'm going to go ahead and actually get rid of that a line item sensor

because it's not what we want to do yet it's going to cause some issues.

So we're going to change our setup just a little bit in the next video.