Style an HTML Element with Styled Component
We are going to learn how to make our first component using the styled-components library.
We'll use styled.h1 to create a <h1> component and adjust it's font-family, positioning and color with css.
Instructor: [0:00] Let's build our first styled component. The first thing we need to do is import styled, which is the default export from styled components which is already installed, like this. Now, the way the styled components works is that you create a components.styled. What this means is that you make an actual React component.
[0:19] I'm going to create a React component called heading one because we're replacing this H1 that looks terrible. I'm going to say heading one = styled.h1. After the thing, the thing that says .something means that this can be any HTML component as you can see here.
[0:37] If I say .h1 and then I do anything so let me say font-family and I'm going to do the apple one, so I'm going to stoop this an apple system. Then I'm going to say text-align: center. Cool. Now we have a React component, and it's supposed to have a font-family and a text-align. But absolutely nothing has happened.
[1:01] Let me copy this. What we have to do is, we have to actually use this React component. This will return us an H1 with some classes already applied to it. Change it here, and now as you can see, it actually styled. Just to make sure, let's add a color.
[1:17] Let me see a color. It's not working, so I'm just going to say, Papaya Whip, which is obviously the worst color I could ever choose, but there you go. Now it's a style component, and you can change your styles here.