Set up emotion-theming within a ReactJS application

Instructor: [00:01] If you go over here, we see the code that's making this happen. You see that I am importing the styled default from react-emotion, and specifically I'm using the macro, which basically just means that I don't need to import any specific Babel plugin to use emotion.

[00:19] Continuing on them, we see that we have this header component being created. That's in H2. It has these styles. Our wrapper is going to be a div with these styles. Finally, the PText is just some paragraph text.

[00:35] Inside my App.js file is where I am using these components to display this. If we want to change values, let's say we want this to be teal. We'll change it back to white. We want this to be 50.

[00:51] As you can see, everything is just reflecting as you would expect it to. Although this is awesome, it's not the most reusable approach to creating styled components.

[01:05] Let's see how we could use themes to change this. To use themes with emotion, we need to import the ThemeProvider from the emotion-theming library.

[01:16] Once we have that imported, we're then just going to wrap our top of the component, which in this case is App with this provider. Now, if we look at our page, we see that nothing's rendered here, because ThemeProvider is going to look for theme prop.

[01:34] Here, we'll just put theme=theme, and then we're just going to import this theme that we are using from our shared/themes.js file. Now inside this file is where I am going to generate the code for my theme.

[01:51] As you see, I've included these little nested objects and font styles, and pallet, and headings. This is mainly used to show you that you could really set this up however you'd like.

[02:04] Now that our theme is configured and being exported, we'll see that our styles come back if we hit save. However, we are not actually using any values from within our theme. Let's go ahead and set up out components to do so now.

[02:18] If we take a look at our components, we'll see that we're using template exchange to create them. As a result of this, we can hook into our theme prop like so.

[02:30] Here, I am just saying that the font size of the header is going to be props.theme.fontStyles.size. If we save that, we see our heading text gets smaller. That's because the value of this is 16, but since we are using dynamic values here, we can just modify this value by two.

[02:50] Boom, we see it'll show right back up with this original value of 32. Pretty neat, huh?

[02:57] Moving forward, I am just going to put in place the code that's needed for the rest of these components to make use of that theme object we just so configured before.

[03:08] Now, if we reload the page, we see that our header styles have been loading just as they were before. However, this time, they're using the values from our theme object.

[03:19] Next up, I am just going to theme-ify this wrapper component. It looks like I need to fix the background value. There you have it. Our wrapper is officially hooked up into our theme.

[03:34] Now, before we wrap this up, let's just check this out a little more in detail by modifying some values inside of our theme object.

[03:42] Here, if I change the color to teal, we'll see that everything appears as teal, all of our text. Following this, I can just modify the defaultPadding, as well as change the container height to 50vh, and we'll see that now our application only takes up 50 percent of the view for its height.