1
00:00:00,050 --> 00:00:00,380
All right.

2
00:00:00,380 --> 00:00:07,640
And once we're familiar with the basic setup now let's see how we can style the entire component as

3
00:00:07,640 --> 00:00:13,490
a styled component, which actually is my preferred way of using styled components.

4
00:00:13,580 --> 00:00:16,309
So I'm going to remove the styled button.

5
00:00:17,030 --> 00:00:20,440
Again, if you need a reference, you can always use a Readme.

6
00:00:20,930 --> 00:00:23,390
And essentially, here's what we can do.

7
00:00:24,160 --> 00:00:28,270
We can return from the component, a styled component.

8
00:00:28,270 --> 00:00:32,560
So of course we can set it up above or below component doesn't really matter.

9
00:00:32,560 --> 00:00:34,020
We need to come up with a name.

10
00:00:34,030 --> 00:00:40,240
I usually go with something generic like wrapper or container, and essentially we want to set it equal

11
00:00:40,240 --> 00:00:46,300
to styled, then dot and then well, what element are we returning from the component?

12
00:00:46,540 --> 00:00:49,000
In this case it's div, correct.

13
00:00:49,000 --> 00:00:52,150
So we go with styled dot div.

14
00:00:52,180 --> 00:00:54,010
Then we set up the.

15
00:00:55,010 --> 00:00:56,390
Tag template literals.

16
00:00:56,690 --> 00:00:59,590
And essentially, we just write the CSS.

17
00:00:59,800 --> 00:01:00,500
Now.

18
00:01:01,200 --> 00:01:03,010
What we want to do with the rapper.

19
00:01:03,030 --> 00:01:05,099
We want to place here in the return.

20
00:01:05,099 --> 00:01:12,210
So instead of the div now we're going to go with wrapper and effectively whatever we have inside of

21
00:01:12,210 --> 00:01:14,550
this wrapper, we can style it here.

22
00:01:14,760 --> 00:01:23,510
So let's add here another div with a class name of content, and inside of it we'll say some content

23
00:01:23,520 --> 00:01:25,080
and effectively.

24
00:01:26,450 --> 00:01:28,580
Here are the styles I want to apply.

25
00:01:28,670 --> 00:01:33,410
Again, I'm not going to be original, I'm just going to say Background Red and what's super cool if

26
00:01:33,410 --> 00:01:34,790
I want to style the heading one.

27
00:01:35,870 --> 00:01:40,100
I simply go with heading one and I'm just going to go with color white.

28
00:01:40,310 --> 00:01:47,180
And if I want to style the content, well, I just need to select the class and then we will go with

29
00:01:47,180 --> 00:01:49,280
background below.

30
00:01:50,200 --> 00:01:53,080
And let's set up the color of yellow.

31
00:01:53,110 --> 00:01:55,510
Let's save this and check it out.

32
00:01:56,430 --> 00:01:59,820
Notice how nicely I get all of the styles.

33
00:01:59,850 --> 00:02:07,350
Now, please keep in mind that the styled component is not is not affecting the logic.

34
00:02:07,890 --> 00:02:10,229
So this is only used for styling.

35
00:02:10,229 --> 00:02:15,810
Your functionality won't change whether you add the styled component or you don't.

36
00:02:15,810 --> 00:02:19,990
So this wrapper component is not responsible for any functionality.

37
00:02:20,010 --> 00:02:21,660
It's just for styling.

38
00:02:21,660 --> 00:02:27,720
And notice if you navigate to the big screen, you'll see this div and check out this class, right?

39
00:02:27,750 --> 00:02:30,570
So that's the unique class we're using here.

40
00:02:31,430 --> 00:02:34,250
For the entire div that we're returning.

41
00:02:34,250 --> 00:02:41,180
And then inside of the content, we have this unique class that we have on the styled component and

42
00:02:41,180 --> 00:02:42,910
the content class.

43
00:02:42,920 --> 00:02:50,660
And again, as a result, if I use the content class in some other styled component, there's going

44
00:02:50,660 --> 00:02:53,840
to be no name collisions unless it's a global class.

45
00:02:53,870 --> 00:02:55,550
Then of course it's a little bit different.

46
00:02:55,550 --> 00:03:00,980
But if it's not a global class, if it's only used in a styled component, then notice each styled component

47
00:03:00,980 --> 00:03:02,660
is going to have this unique class.

48
00:03:02,660 --> 00:03:05,300
And then, for example, we'll have the content one.

49
00:03:05,300 --> 00:03:11,630
So I can use this content 1 in 10 other styled components and I'll have no issues.

50
00:03:11,630 --> 00:03:16,400
Each of them will get those unique styles for this specific styled component.

51
00:03:16,400 --> 00:03:22,310
And again, this is my preference usually when I work with styled components, because that way I can

52
00:03:22,310 --> 00:03:28,700
set up whatever logic I want inside of the component and then I can right away set up the styles as

53
00:03:28,700 --> 00:03:29,240
well.

54
00:03:29,420 --> 00:03:30,990
Hopefully this is clear.

55
00:03:31,300 --> 00:03:35,140
Up next, we'll actually complete the landing page.