Check out a free preview of the full Intermediate Gatsby with Gatsby Themes course:
The "Global Styles" Lesson is part of the full, Intermediate Gatsby with Gatsby Themes course featured in this preview video. Here's what you'd learn in this lesson:

Jason demonstrates how to add global styles, uses global styles to remove the margin and padding in the body, and adds a cautionary note to use global styles sparingly so that there is no conflict with the theme UI.

Get Unlimited Access Now

Transcript from the "Global Styles" Lesson

[00:00:00]
>> Jason Lengstorf: Now that FX prop is picking up what we want, it's doing the things that we wanted to do. This is great, this is exactly what we're after. But there are a couple weird things, right? Like we've got this margin and that comes from the body. So if we wanna override that theme UI isn't actually built to handle global styles.

[00:00:17] And this is something that you have to be kinda careful about because if you add global styles, global styles can conflict one of the big challenges of CSS is understanding scope. And when you start putting things in the global scope, it can become really challenging as it scales out across the team.

[00:00:32] So you wanna be very sparing about when you apply global styles. One thing that I think is kind of a generally acceptable thing to do is remove the body, margin and padding, so that things can go to the edge of the viewport. So, to do that we're gonna hop back into our layout and we're going to import Global from emotion/core.

[00:00:57] And in emotion/core we're able to just kind of define some global styles, which is really nice. So let's just do that, I'm gonna do global styles. And I want to set the body to have a margin of 0.
>> Jason Lengstorf: And now it goes to the edge of the screen.

[00:01:19] So again, use that sparingly, but it is a handy way to fix things like body margin.