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.
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
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!