So now it's time to add status to adapt, so head outside your.
And function component and will be creating a styles.
So let's just create context.
You style.
And we'll just make sure that it makes uses the McStays and it is going to take up an object that is
going to hold different key values, Spear and those keys will be having the safest properties.
So let's just first create a container.
And this is going to hold up different properties, property is, for example, it is going to hold
up a display of Flex.
And apart from container, there is going to be trade.
And this is going to hold in the property.
Flecks of one.
Apart from Flex, it is going to also hold another property that is going to be piling up, then it
is supposed to be a comma or a semicolon batting.
Of often and then again, another property, and this is going to be an income.
And inside that apartment, maybe also having another property that is going to be ex bench.
Now these two properties are what will be showing in US cards.
So let's just consider income as well as an expense in our income.
Maybe having a color of green violin and expense will be having a lot of added.
So let's put up a color of green, and then it will be putting up a color of red.
Now, let's just use this Stiles insider component.
Is a component of creating a constant and let's just call it concert stage.
And I just put up and use.
So, OK, so now we need to assign this status to our different property.
So the first is going to be a box.
It is going to get a class name of.
So start container, while our income is going to get the property of.
Style income and expenses are going to get the property of.
Class name.
Sized the expense.
It is supposed to be obedient not to slash.
Now, I think we made a certain mistake.
Last name is going to is supposed to be under typography that is below the income so just pasted over
here.
And in this case also.
Will be it over.
In the second typography, now our content is going to hold up.
The class name of straight.
So let's just put a test or trade.
And this is the second guard component.
Again, just put last name oxidized or trained.
So we have successfully added all the things that we need an expansion, we have studies, we have a
dynamically allocated data.
So now let's move into another component and configure it.
So the next in the hit list is the transactions component and then will be moving into new transaction.