OK.
And as far as the start item, we want to pull out the properties one by one.
Pretty much the properties that we have in the default start.
And then as far as the return, we want to grab the wrapper that will add the styling.
And this is going to be the case where we will add the color as well as the background as a prop shown
at the end of the video.
I'll showcase how the styling works in the start component, but as far as the return we go, the wrapper
we have here, the header where I want to place the count as well as the icon.
And I also want to add the title.
So let's start working on that first in a start and then we want to grab that rapper.
So let's go here with rapper from.
And then we're navigating to assets and rappers.
And we're looking for that item in this case.
Well, since I spread out all of the props without that item, I want to look for count.
So total icon color and the background color when it comes to return will go with rapper and inside
of it.
Let's go with at our first sight of the header.
Let's set up the response.
So the response, we don't have a class name of count.
And this is where will the count value, copy and paste and all this change this one around a little
bit where it's not going to be a count.
It's actually going to be an icon.
And then right next to the header.
Let's go with heading five and then let's add a class name again.
In this case, it's a class name title, and the value also will be title one if we want to have those
background colors.
So for time me, if we navigate through the browser notice, this is what we'll see.
So everything works, we just need to add those colors.
And the way we'll do that in this case will go with color and will pass in the colors.
And now we're passing this prop to the style component.
So this is our wrapper, so we're passing it to the south component where we're going to go with background,
the color and just your show, your how the functionality works with me.
Navigate through the wrappers.
I'm going to the start item and then notice, that's my wrapper.
OK, we have all the styles like I already showed you.
We can select the classic.
All of that is nice, but take a look at the background, color and color.
So I noticed this functionality.
We have color instead of hard coding that value.
I'm actually looking for the props that are past thin and set it equal to the color prop.
And since in my array, in my default, that's one each color and background color is different.
That's why it is getting applied again.
Just to reiterate, this is not the only way how we can set it up, where we previously looked at the
option, where we are up the class dynamically, that definitely is an option.
But in my case, I did want to showcase how you and do that using the straight up style components approach.
And that's why I went this route in this component.
And with this in place now, we can start setting up our monthly applications.