Check out a free preview of the full Intermediate React course:
The "Emotion Q&A" Lesson is part of the full, Intermediate React course featured in this preview video. Here's what you'd learn in this lesson:

Brian answers questions about injecting global styles and explains why he suggests using emotion over styled components.

Get Unlimited Access Now

Transcript from the "Emotion Q&A" Lesson

[00:00:00]
>> Speaker 1: People are asking how do you style like global paragraph tags, stuff like that?
>> Brian Holt: Yeah, so if you didn't want to have any external CSS and you want it to handle everything with emotion let's just pull up emotions documentations. Whoops. Emotion.sh, they have great docs. But think there is a function called like global or something like that.

[00:00:26] Global styles, this one right here. So yeah you import, inject. Let's make that a little bigger for you. Import inject global like this. That makes it unreadable. And then you just do injectGlobal and you can just put a style sheet in there. And it will just inject that, and you can do that in anything.

[00:00:44] So, if you wanted to see what that looks like, does this export injectGlobal? InjectGlobal, like that. And then I say injectGlobal.
>> Brian Holt: So if you come back here notice now all my text is red cuz I injected in to global. Everything should have a color red, okay? So it literally takes that and injects it into your global style sheet.

[00:01:28]
>> Brian Holt: Which is fun. I would not suggest injecting global in just a random component. It's a terrible idea. Because you are never gonna find that lighter. [LAUGH] So you should have like one file that does inject global and then be done with it.
>> Brian Holt: So one question you should be having from yourself is look, CSS has no overhead, right?

[00:01:52] The browser just downloads it, parses it and shows it. This is a terrible idea there shouldn't performance overheads here, right? This is kinda why I've chosen to move away from styles components. Is style components, it's a big library and it has a run time so the runtime is actually kinda slow can be kinda slow I should say.

[00:02:13] Poorly written style components can be slow. The motion's small. It's a couple of kilobytes, and it's quite fast. Furthermore, you can actually go even a step further. You can run your application and have it generate a style sheet, which is then loaded on the side. I'm not going to show you how to do that today.

[00:02:33] It's a lot of setup. You can actually have it generate all of your CSS for you, which is great.
>> Speaker 3: Going along with that, with that generated based on like conditionals that you do, or would it just be kind of like a baseline default styles, not the ones that where you could call a function?

[00:02:57]
>> Brian Holt: You still need the runtime for that. Emotion still has to do things for you, it's not just going to remove itself entirely from the equation, but there's a bunch of stuff that it can do for you. So that's fair, it's not actually going to generate everything in the style sheet, but you can have it basically generate what you need for the first render so that you can inline it in the head or something like that for your critical styles path.

[00:03:23]
>> Brian Holt: You have to do service head rendering to accomplish that. Which I will show you how to do service head rendering later. Just not with emotion.