Intermediate React Styling Components with Emotion
This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Styling Components with Emotion" Lesson
>> Brian Holt: Now what happens if I want to do a bunch of additional styling of this kind of stuff? Right now I'm including all of the CSS for you but what happens if we wanted to put all the styling in with the component itself? Well, let's talk about how to do that.
[00:00:12] We're gonna import styled from react-emotion, now the style is going to allow us to make our style of components. So components that have style associated with them. So I'm going to make a new react component called container, and it's going to be styled. Here, I need to give it something the kind of tag that I want with it.
[00:00:41] So it's a header tag, I'm gonna replace this header right here right? So it's gonna be a styled header and then I'm gonna replace this header right here with container.
>> Brian Holt: So right now this wouldn't do anything, it would still work but. All container is it's just a header, then I wanna give it style that's only associated with this container.
[00:01:31] Next to the tilde or on the same key as the tilde. There's something called the Tagged Template Literal. So right after this parenthesis right here, I'm going to put a backtick. And now I can write the CSS and that's going to be fed into the header, right? So I'm gonna just give it a couple of different things, background-color:,
>> Brian Holt: #333 Position colon sticky, so we're gonna make it a sticky header, top colon zero, so it's stuck at the top and z index of something greater than one. We'll just give it 10 and now, all of these CSS properties are going to be associated with container. Now some of you might not be seeing syntax highlighting with this.
[00:02:25] You're gonna need some sort of plug-in to your editor to get the syntax highlighting the work, I'm using VS Code. So if you wanna know what that one is, it's this one down here, vscode-styled-components. That's the one that you need if you wanna do it with VS Code.
[00:02:42] You'll have to install it and then restart your editor. But Sublime should have it, JetBrains, all of those should probably have it. If you're on Vim, you're on your own.
>> Brian Holt: But you're probably used to that. [LAUGH] Okay, so now I think I'll look at Container. Hopefully, it broke.
[00:03:06] You have to do npm run dev to get your devServer started again.
>> Brian Holt: So hopefully at the beginning of the course, we'll go through and set it up and then re use that.
>> Brian Holt: Cool, so you can see now there is a black background, the header has changed right, and now it's sticky so if I scroll down it stays with me as well
>> Brian Holt: Optimized for deletability, that's one of my mantras writing code is if something is deletable, that means it's modular.
[00:04:40] And if it's modular, then it's great.
>> Brian Holt: It just leads to all sorts of good habits.