All language subtitles for 17. Using Lists - Styling

So let's open this back up and let's start getting some styles onto our drawers so that it's not this

just blank white and black text because we obviously want this to fit the look and feel of the rest

of our application as well as match the styling for the tabs that we had previously so on our draw on

our swipe label draw component.

Let's come down and we're gonna add another prop onto it and we're going to give a class's prop.

And remember this is how we can overwrite some of the base material UI components styles.

And for these swipe a ball draw we actually want to target the paper components that is used underneath

the draw and apply our styling to that so let's create a class of draw.

And now let's come up to our styles object and we will create the draw styles let's open this up and

we'll start by setting the background color to our theme dot powered dot Coleman dot blue let's save

this.

And when the page refreshes we can come and open it up to find our nice blue draw.

Now let's get some of the actual items themselves looking like the tabs by coming down to each of our

list item texts.

We're going to add a class name set to oh woops.

Looks like I accidently overrode open.

I'm jumping around because my code editor wants me.

Okay here we go.

So that list item text will add a prop the class name set to classes classes dot draw.

Item so let's come up and now create that style in our object underneath the draw.

We'll set a draw.

Item class and we'll set the style to actually extend the theme dot typography dot tab styles because

we've already set up how we wore our tabs to look and we want our draw to be as consistent with that

as possible.

So we're just going to extend those styles and then set the text color to white let's go ahead and save

that and make sure that our styles have updated in the new draw.

And now you can see that on the Home tab the style has changed.

We actually forgot to add that class name to all the rest of the list items.

And so now let's go ahead and take our class name right here of the draw item and let's go ahead and

add that to the rest of our list item texts as well

OK.

And having done that we can save.

And now when the page refreshes you will see all of our tabs looking nice and newly styled.

Now I actually want to change the styling here on the estimate tab a little bit.

Just so there is stands out kind of like the estimate button does in the tabs so down here on our free

estimate list item text in the class name.

Let's go ahead and wrap that classes dot draw item within array and then we can go ahead and pass in

another style of classes dot draw draw item estimate.

And that is going to apply both of these stylings to our text.

So now if we come back up to these styles object again and we create our draw item estimate now we can

set this style to a background color of theme dot palette dog common dot orange.

So now if we save this we'll see the page refresh and we can open up to see oh well it looks like we

got that in the wrong place.

And so let's scroll back down to our estimate component and instead of putting that draw item estimate

class here on the list item text let's actually get rid of that.

And so we can get rid of the array here and let's add a class name to the wrapping list item and then

we'll set this to our classes dot draw item estimates.

So now if we go ahead and we save this the page will refresh and we can check to now see a completely

styled tab.

You see we still get the nice hover effect so we can see when we're hovering over it.

But then otherwise the tab is going to stand out and just draw a little more attention.