Style an HTML Element with Styled Component

Sara Vieira
InstructorSara Vieira
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

egghead
egghead
~ 32 seconds ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today