Check out a free preview of the full Introduction to Gatsby course:
The "Adding CSS with Emotion" Lesson is part of the full, Introduction to Gatsby course featured in this preview video. Here's what you'd learn in this lesson:

Jason discusses how styling works in Gatsby and sets up Emotion, which will allow for writing CSS styles with JavaScript.

Get Unlimited Access Now

Transcript from the "Adding CSS with Emotion" Lesson

[00:00:00]
>> Jason Lengstorf: Styles and Gatsby are are actually fairly flexible you can do them with regular CSS. You can use CSS modules, you can use any of the CSS and JS solutions. All of them have their trade offs, for this particular workshop we're going to be using Emotion but there's nothing that stops you from using really whatever you want.

[00:00:19] We are gonna be using Emotion for this. Emotion is one of many flavors of CSS and JS. There is no right or wrong solution here this is just very much gonna come down to preference. You don't even need to use CSS and JS with Gatsby. You can use CSS modules or just plain CSS files, it really is up to you.

[00:00:39] So to make this work, what we're going to do is we're going to install a few new dependencies. So I'm going to stop my server. I'm hitting Ctrl+C to do that and then, let's clear so it's a little easier to see. How's my font size? Can everybody read it?

[00:00:55] Okay, so we're going to do an npm install. And I'm going to install @emotion/core @emotion/styled and gatsby-plugin-emotion.
>> Jason Lengstorf: So emotion/core is gonna give us access to global styles and to the CSS prop which we wanna use. And then emotion/styled gives us a styled components kind of interface. We'll look at a few different ways to do styles and mix and match.

[00:01:33] And then gatsby-plugin-emotion is to add the things that we need for Gatsby to build with Emotion properly, made ads, a Babel plugin and some other stuff so that you don't have to think about it again, we want this to be easy. So you install the plugin and things are just gonna work.

[00:01:48] So let me get this installing. So to configure plugins, we have to create a file out here and this file is called gatsby-config. And this is an optional file only if you want to change things in your gatsby site. It's set up using the common JS style, so you are going to do module.exports and then this exports an object.

[00:02:10] You can leave this empty if you want, again none of the fields in here are required, they are all optional. We want to include plug-ins and the plug-in that we want to include is gatsby-plugin-emotion. So having done this, Gatsby now knows how to use Emotion. So this is kind of like the matrix, you just download the knowledge and you know kung fu, and you're ready to go.

[00:02:32] So once you've got this typed in, that's the last you need to think about config. We can just start writing some code. And the way that we're going to do this is we're going to create a common layout. So on any website, you're probably gonna have a header and maybe some navigation, some stuff that stays the same between pages.

[00:02:54] And we also probably want something like, if I make this full screen, this is kinda junky, it's all stuck to the side of page and stuff. That's not really what we want. So instead, let's come up with a way to style this and make it look nice as it's currently set up.

[00:03:12] And make that sharable, so kind of global styles and all those good things. So to do that, I'm gonna create a new folder, and folder names in this source directory, aside from pages, are up to you, you can call them whatever you want. And I'm gonna create a file called layout.js, and so in this, this is gonna be another react component, so we're gonna import react from react.

[00:03:32] And then I want to import Global and the CSS prop from emotion/core.
>> Jason Lengstorf: Then I am going to just set this up to be a named constant. The reason that I'm doing that is because if you're trying to debug your react, it's helpful to name the components. It makes life a little bit easier.

[00:03:57] In a layout component, it's a little bit special because what we're going to do is we are just going to wrap things with the layout, and then anything that gets passed to that, as child content, we're just going to display them. We're not gonna do anything to it.

[00:04:08] And we're going to take advantage of react children prop to make that happen. So, down here, we can just set up our file. So we'll start with the react fragment, and the first thing that we want to do is set up our global styles.
>> Jason Lengstorf: And just looking at how this works.

[00:04:34] Global is a react component that Emotion gives us that allows us to set up basically styles that are going to show up in the Global scope. So this is what you would imagine is like traditional CSS. Anything that we put here is going to be applied to everything on the page.