Gatsby JS Course: 3. Styled Components

Hi and welcome to video three of the  Gatsby JS course styled components, in this video we'll be setting up and  configuring our styled components so we can start building our Gatsby  layouts and making them look nice. Styled components are styles in JavaScript using  ES6 syntax, that might sound a bit mind-bending if you have not used them before but the CSS syntax  is pretty much the same, you just get access to JavaScript inside your CSS to do some wonderful  things that were simply not possi

ble before. I really enjoy using style  components because they are so smart. They do a lot of work for us which  previously we had to do ourselves, what kind of work you ask? Well, styled components  automatically apply vendor prefixes to our CSS, they automatically generate critical CSS  and inject only the styles that are used into our pages, this way we don't need all the CSS  on every page helping with things like load times. They generate unique class names  so there's no overlapping and s

cope issues and much much more, which  we'll see throughout this course. So let's get it set up, first we need to switch  back to our code and get that running, and I'm just going to tidy up from the previous video  and remove the update 1 from our hello world. So just clear that out and we can run  npm start to get the project running. Now we need to install our dependencies so I'm  just going to open up another terminal in here. And then I'm going to install styled-components and gatsby-plugin

-styled-components and whilst  we're here we'll also install styled-normalize. You can copy this straight from the description  in the video so we just get that going. In non-gatsby applications we only  need the styled-components package, but as this is a Gatsby application we need  to install the styled-components plugin, this helps Gatsby inject the styles into  the HTML when it's generating our pages. And we're going to use the styled-normalize  package to implement normalize.css in our appl

ication, which if you have not used before  it's a way to make your styles match across browser, because sometimes there's subtle  differences between browsers such as Chrome, FireFox, Edge, Safari and all  the other browsers basically. So now that's done i'll just clear my terminal and  we can just check that that has successfully run, so if I go to here, localhost 8000,  perfect we can see our hello world. I'll just zoom that in for you so put that to 200% Right, go back to our code. Now we ne

ed to register our plugin, if we go to our gatsby-config.json we can  now register our styled components plugin. To do so we simply drop the  plugin name into this array, this tells Gatsby that when building  we want to make use of this plugin. This plugin requires no additional configuration  so we can literally just drop the name in here, if I go here and grab the  name from my package.json style, oh no it's not styled, it's  Gatsby plugin styled components. Copy that from there,  gatsby-plugi

n-styled-components, just save that, and it's asking me if I want to  rebuild as this isn't a change that it can hot reload, it has to rebuild the entire application  as it's got to re-implement the use of the plugin. Now we have our packages in and our configuration  done we need to create a new react component, this component is going to be called layout, so  first inside our source we're going to create a components directory, it's just  where we'll store all our react components going forwar

d and then inside  here we're going to create a Layout.js I like to capitalize the file name on  Layout.js as it's a reusable react component, but feel free to do whatever you please here. The reason I am creating layout as a component  is because we will want to use this across all of our pages when we get to making them, so  we don't want to have to keep rewriting this. Now we can do our standard component setup  and export a component called Layout. So first we need to import react from react

Then we need to export default function Layout. and return Let's return main. The reason I'm creating this with a main  tag is because this is where all of our page content will be, this component  is going to wrap each entire page so, everything inside the page  is technically the main content. So with that in mind we'll put the children there and we will grab the children  as a prop passed Layout. Just save that there. You just see all  that jump and change, that's just ESLint formatting it f

or me yours might not do that, but don't worry it would perform the  same if it was that way or that way. Now we have our layout component and  we have it accepting the children props and returning main, we need to  wrap our page with this component. So if we go back to our index.js  file, we can start writing layout and luckily its picked it up and  imported it for us automatically. So if we put our layout there, copy our content, and place it all inside there, now we have  our home page being

wrapped by the layout. And all the layout page is  doing it at this point in time, is wrapping all that content inside a main tag. So let's just test that that has worked,  if we go back to our chrome window. Hit F12, and inspect our content  our H1 should be inside a main tag. So, perfect that looks like  it's all working as expected, we now have a layout that is working so we can  now set up and configure our styled components. And we're going to set that up inside our layout. And the reason w

e're setting up our  style components inside our layout is so that every page that  is wrapped inside of this, will have access to styled components and our  theme providers which we're about to set up. I'm going to quickly write out the setup and  then i'll explain what it is doing so first we want to import from styled components,  and we want to import the theme provider. Once we have that theme provider, we can  wrap all of our main content inside of it. The theme provider expects a theme pr

op and to  that we'll create a new variable, so we'll call it theme we'll just set it equal to an empty  object for now, and we'll pass it the theme. So what is the theme provider? This component provides the theme object we  pass it into every style component we write inside of our application, this means we can  pass variables around our styles much easier. You might pass things such as color or breakpoint  values, you'll see this in action throughout this course so we'll get our hands dirty 

with this later on, but for now all need to worry about is that this theme provider  is in place and it's being passed a theme. Everything inside of this now  has access to this theme, meaning everything on our index file  has access to this theme. Before we continue let's start  creating our first set of styles, so let's start with some global styles. To create global styles with style components we  need to import the create global styles function. So if we go to here, create  global styles, w

e can grab that and inside here we can then  start writing our styles. So we will name this global styles  and the reason i'm doing it with a capital letter first is because  this is actually a react component. So if we create that create global styles and  then put some backticks at the edge of that everything inside of here is now our styles So for now we will just set the  body's background to be red. Next we need to copy that constant and inside  our theme provider we can place that componen

t. This component doesn't render any HTML  into our component so don't worry about anything in our application being generated  here, this is simply for applying styles. So if we go back to our chrome page perfect, it's now red, so that shows that this is  working, if I change this to blue and refresh. Save the file first, now refresh,  now you can see it's blue, perfect. Now we have added our global styles let's add  normalize, as I mentioned earlier normalize standardises what we see across di

fferent  browsers such as IE FireFox and Chrome. So we start another playing field, because  sometimes things like fonts and buttons are sized a little bit differently on different  browsers and we want to keep them consistent. The good news is this is really easy styled  normalize uses create global styles under the hood so we can import and use it the same way  we use our global styles so if we import from styled normalize and  we want to import normalize. And we can copy that and paste it  in

, just like we did with ours. So that normalize will now be implemented  and you can see that we no longer have any space to the left of our world. If I remove this, save it and go  back, you'll see that space is added. Yeah, perfect so that shows us  that our normalize is working. Now we have our theme provider set  up and our global styles in place, let's make our first styled component. So before we do that i'm going to  set the background back to white as that blue is, quite daunting. So if

we go back to our index.js file we'll  use the H1 tag here and style that up, so first of all we want to import  styled from style components. Then we want to create a new H1 tag  here, so we'll call it styled title, and then we'll set that equal to styled dot. Styled dot, and then we get all of these options,  and these options map to exactly the HTML equivalent so we want a h1 tag. so style.h1, then  we can throw into back ticks and now everything we throw in between here will be CSS for the t

itle so  let's create the color red just to test this out. If we now take the style title tag and  replace that h1 with that and save, go back to chrome, we should have a red h1. Before we move on to the next video, let me first  show you how to use variables in style components. If we go back to our layout file,  where we declared our theme, we can start adding variables into here.  So in here I'm going to add a color object. And then inside there i'm going to add a text key  and i'll set the v

alue to just be black for now. So now inside our theme provider we have a theme  that has a color object that has a text key. So let's make use of that in our  index.js file, on our home page. So to access variables inside our style component we simply create a new template literal  and then inside here we have the theme. It does pass in a props and then we'd get the  theme off that but it's easier to just destructure that straight off as we know we're getting the  theme. And then the theme is r

eturned from here. So we can say theme dot color dot text,  if we save that and go back to our chrome. We see that the text is now black, to confirm  this works if we just jump back to our editor, we can go back to our layout file  and we can change this variable. So we'll go back to that awful red, perfect. So the theme provider is working and it's  passing context around the application, whilst we're here let's add another variable  into this so we'll add a background variable in. Try and spel

l it correctly. And we'll create the background of white. Lovely, and then inside our global  styles we'll make use of this. So again we create a template  literal we destructure off the theme and then we want to return the  theme dot color dot background. Lovely, now, what's this error? Theme is already  declared in the upper scope. Ah of course, the name of the actual theme is called theme,  so we'll change that to main theme for now, make sure we pass that down to our theme provider,  give th

at a save, it should look no different. So yep white background red text, now  what we can do is change these all back. Save that and we have our basic theme setup. and then we are ready to go to the next  video, where we're going to start hooking into the Gatsby API and start fleshing out  our header and footer. So if you haven't quite caught on to the concepts of style components  yet, don't worry we're going to be practicing this lots and lots so it will eventually start to  click. Thanks and

i'll see you in the next video!