1
00:00:01,340 --> 00:00:05,780
So now they'll be adding states to account to our app component.

2
00:00:06,170 --> 00:00:12,230
So for that purpose, head out of your function component and create a constant, um, let's call it

3
00:00:12,260 --> 00:00:12,770
your style.

4
00:00:16,220 --> 00:00:20,510
And we're going to use the Mic Stiles property of the material.

5
00:00:21,590 --> 00:00:28,240
So let's just make sense and it is going to have an object.

6
00:00:28,250 --> 00:00:30,190
Then again, it is going to have a component.

7
00:00:30,200 --> 00:00:34,490
Let's name the property is going to net this component.

8
00:00:34,490 --> 00:00:40,720
Property is going to hold the ceases properties that are supposed to be applied to a particular element.

9
00:00:40,730 --> 00:00:42,830
So let's give it a background color of.

10
00:00:49,310 --> 00:00:50,480
Hashtag Tupolev.

11
00:00:50,990 --> 00:00:58,170
And this, again, is right, but with a slightly different shade, you might recall this and really

12
00:00:58,170 --> 00:00:59,210
give it a parting of.

13
00:01:00,400 --> 00:01:01,210
And pixels.

14
00:01:01,930 --> 00:01:05,370
Now we won't be adding pixels word after it because it is going to be auto content.

15
00:01:06,900 --> 00:01:08,670
And we'll give it a border radius.

16
00:01:13,230 --> 00:01:15,690
Of 20 and a better of.

17
00:01:19,280 --> 00:01:19,910
500.

18
00:01:21,380 --> 00:01:23,120
And then we'll be targeting.

19
00:01:24,410 --> 00:01:24,980
Percent.

20
00:01:27,500 --> 00:01:32,120
Star and this is going to get up parting of.

21
00:01:35,860 --> 00:01:41,650
Then, OK, so we have created our status, no time to use them instead of functional component, let's

22
00:01:41,650 --> 00:01:42,700
create a constant.

23
00:01:44,780 --> 00:01:46,040
And Nima classes.

24
00:01:47,450 --> 00:01:49,490
And this is going to use our mixed science.

25
00:01:52,410 --> 00:01:55,620
OK, now it would be using this class as inside our box.

26
00:01:57,330 --> 00:02:00,060
So inside the box will be assigning it that last name of.

27
00:02:02,500 --> 00:02:05,520
Classes start component.

28
00:02:06,320 --> 00:02:11,280
So this is the place where all this, he says, is going to be applied your styles.

29
00:02:11,560 --> 00:02:14,800
OK, it is supposed to be your styles, not make styles.

30
00:02:18,740 --> 00:02:19,730
He was OK.

31
00:02:20,060 --> 00:02:21,260
So we have configured that up.

32
00:02:21,770 --> 00:02:25,700
Now it's time to move into another component, and this time we're going to move into a balance sheet.

33
00:02:26,390 --> 00:02:29,810
Sorry, the balance component, and we'll be configuring it next.