Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Style an HTML Element with Styled Component

    Sara VieiraSara Vieira

    In this lesson, 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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    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.