All right.
And once we're familiar with the basic setup now let's see how we can style the entire component as
a styled component, which actually is my preferred way of using styled components.
So I'm going to remove the styled button.
Again, if you need a reference, you can always use a Readme.
And essentially, here's what we can do.
We can return from the component, a styled component.
So of course we can set it up above or below component doesn't really matter.
We need to come up with a name.
I usually go with something generic like wrapper or container, and essentially we want to set it equal
to styled, then dot and then well, what element are we returning from the component?
In this case it's div, correct.
So we go with styled dot div.
Then we set up the.
Tag template literals.
And essentially, we just write the CSS.
Now.
What we want to do with the rapper.
We want to place here in the return.
So instead of the div now we're going to go with wrapper and effectively whatever we have inside of
this wrapper, we can style it here.
So let's add here another div with a class name of content, and inside of it we'll say some content
and effectively.
Here are the styles I want to apply.
Again, I'm not going to be original, I'm just going to say Background Red and what's super cool if
I want to style the heading one.
I simply go with heading one and I'm just going to go with color white.
And if I want to style the content, well, I just need to select the class and then we will go with
background below.
And let's set up the color of yellow.
Let's save this and check it out.
Notice how nicely I get all of the styles.
Now, please keep in mind that the styled component is not is not affecting the logic.
So this is only used for styling.
Your functionality won't change whether you add the styled component or you don't.
So this wrapper component is not responsible for any functionality.
It's just for styling.
And notice if you navigate to the big screen, you'll see this div and check out this class, right?
So that's the unique class we're using here.
For the entire div that we're returning.
And then inside of the content, we have this unique class that we have on the styled component and
the content class.
And again, as a result, if I use the content class in some other styled component, there's going
to be no name collisions unless it's a global class.
Then of course it's a little bit different.
But if it's not a global class, if it's only used in a styled component, then notice each styled component
is going to have this unique class.
And then, for example, we'll have the content one.
So I can use this content 1 in 10 other styled components and I'll have no issues.
Each of them will get those unique styles for this specific styled component.
And again, this is my preference usually when I work with styled components, because that way I can
set up whatever logic I want inside of the component and then I can right away set up the styles as
well.
Hopefully this is clear.
Up next, we'll actually complete the landing page.