1
00:00:00,210 --> 00:00:00,600
OK.

2
00:00:00,840 --> 00:00:05,100
And as far as the start item, we want to pull out the properties one by one.

3
00:00:05,460 --> 00:00:09,690
Pretty much the properties that we have in the default start.

4
00:00:10,170 --> 00:00:14,670
And then as far as the return, we want to grab the wrapper that will add the styling.

5
00:00:15,030 --> 00:00:21,950
And this is going to be the case where we will add the color as well as the background as a prop shown

6
00:00:21,990 --> 00:00:22,980
at the end of the video.

7
00:00:23,310 --> 00:00:29,520
I'll showcase how the styling works in the start component, but as far as the return we go, the wrapper

8
00:00:29,730 --> 00:00:35,100
we have here, the header where I want to place the count as well as the icon.

9
00:00:35,310 --> 00:00:37,230
And I also want to add the title.

10
00:00:38,160 --> 00:00:43,260
So let's start working on that first in a start and then we want to grab that rapper.

11
00:00:43,860 --> 00:00:46,650
So let's go here with rapper from.

12
00:00:47,070 --> 00:00:51,000
And then we're navigating to assets and rappers.

13
00:00:51,090 --> 00:00:54,360
And we're looking for that item in this case.

14
00:00:54,810 --> 00:01:00,300
Well, since I spread out all of the props without that item, I want to look for count.

15
00:01:01,200 --> 00:01:11,730
So total icon color and the background color when it comes to return will go with rapper and inside

16
00:01:11,730 --> 00:01:12,010
of it.

17
00:01:12,090 --> 00:01:15,530
Let's go with at our first sight of the header.

18
00:01:15,750 --> 00:01:17,160
Let's set up the response.

19
00:01:17,640 --> 00:01:20,700
So the response, we don't have a class name of count.

20
00:01:21,240 --> 00:01:28,080
And this is where will the count value, copy and paste and all this change this one around a little

21
00:01:28,080 --> 00:01:30,300
bit where it's not going to be a count.

22
00:01:30,720 --> 00:01:32,210
It's actually going to be an icon.

23
00:01:32,220 --> 00:01:34,500
And then right next to the header.

24
00:01:34,960 --> 00:01:38,730
Let's go with heading five and then let's add a class name again.

25
00:01:38,730 --> 00:01:47,130
In this case, it's a class name title, and the value also will be title one if we want to have those

26
00:01:47,130 --> 00:01:48,090
background colors.

27
00:01:48,630 --> 00:01:52,800
So for time me, if we navigate through the browser notice, this is what we'll see.

28
00:01:53,070 --> 00:01:56,040
So everything works, we just need to add those colors.

29
00:01:56,040 --> 00:02:01,350
And the way we'll do that in this case will go with color and will pass in the colors.

30
00:02:01,350 --> 00:02:05,250
And now we're passing this prop to the style component.

31
00:02:05,550 --> 00:02:10,770
So this is our wrapper, so we're passing it to the south component where we're going to go with background,

32
00:02:11,600 --> 00:02:17,250
the color and just your show, your how the functionality works with me.

33
00:02:17,250 --> 00:02:18,840
Navigate through the wrappers.

34
00:02:19,170 --> 00:02:25,050
I'm going to the start item and then notice, that's my wrapper.

35
00:02:25,410 --> 00:02:28,470
OK, we have all the styles like I already showed you.

36
00:02:28,470 --> 00:02:29,940
We can select the classic.

37
00:02:30,360 --> 00:02:36,090
All of that is nice, but take a look at the background, color and color.

38
00:02:37,020 --> 00:02:38,460
So I noticed this functionality.

39
00:02:38,970 --> 00:02:42,480
We have color instead of hard coding that value.

40
00:02:43,020 --> 00:02:49,620
I'm actually looking for the props that are past thin and set it equal to the color prop.

41
00:02:50,500 --> 00:02:57,880
And since in my array, in my default, that's one each color and background color is different.

42
00:02:58,270 --> 00:03:01,210
That's why it is getting applied again.

43
00:03:01,210 --> 00:03:07,060
Just to reiterate, this is not the only way how we can set it up, where we previously looked at the

44
00:03:07,060 --> 00:03:12,280
option, where we are up the class dynamically, that definitely is an option.

45
00:03:12,610 --> 00:03:19,270
But in my case, I did want to showcase how you and do that using the straight up style components approach.

46
00:03:19,540 --> 00:03:22,570
And that's why I went this route in this component.

47
00:03:22,900 --> 00:03:27,880
And with this in place now, we can start setting up our monthly applications.