Use Styled Components with the Object syntax
We will learn how to use the styled-components library using the object notation instead of template strings.
To use object notion, we will replace our backticks with a function and we can use props to change our elements.
We will go through a heading and transform it from template literals, backticks, to objects.
Sara Vieira: [0:00] We have two styled components here. There's two headings, this one is bigger than this one and we can define it here with the props. We're doing this with backticks. We're doing this basically text style.
[0:12] There is also another way that we can style these components. We can use object-based styling. Let's see how different that is.
[0:19] I'm going to first comment this, so, add line comments, and right now, we're going to get an error. Heading is not defined. I'm going to say const heading = styled and it's the same thing, so style.h1. Then, instead of opening backticks, you open function and this function can return an object.
[0:37] Let's start with textAlign and I'm going to say center with quotes and all objects is in the center. Right now here, we do get the prop. Another thing that this can return is a function and that function takes in the props. For that, we need to say props here and then do this and this.
[0:57] Now we have access to the props here. All the thing that we want is small, so let me just deconstruct small from here, so do this. Add small, and now we can say fontSize, and I'm going to say, if small, then do 16, else do 24. I'm missing one here, and there you go.
[1:19] It is slightly cleaner, and there's no need for pixels, so both things work. If I do 24 pixels, that will also work. In Object, it will always default to pixels, so if you want to do something else, like Ems or something, you will have to type it, but it will default to pixels.
[1:37] Now, so that I don't forget, here's a comma, and then we add the next one. I'm going to say fontSize. Now fontSize, fontFamily. I'm going to copy it from here, so apple-system, sans-serif.
[1:50] Let's add the quotes and copy apple-system, sans-serif, and we can delete this.
[1:56] Both of these things...Let me bring it back. Both of these things -- this and this -- do exactly the same thing. They're just different ways of writing it, so whatever you prefer can be the way you write styled-components.