Inherit Styles using CSS Composition with React-Emotion's CSS Import

Instructor: [00:02] On this page, we see two buttons that currently are rendered without any styles. Let's change that.

[00:09] First, we're going to import the CSS function from the React emotion library. Let's see how we could use this. Here, I'm going to define button styles. This is going to be equal to CSS. As you can see, we're calling that CSS function that we just imported, and then using template strings.

[00:34] Inside these template strings, we're going to place our styles that we wish to be defined. Here, I'm going to say that our font family is going to equal to Josefin Sans. We're also going to give it a nice height of 60 pixels and a width of 100 pixels. Again, very verbose. We just want to see how this is working.

[01:07] Before you use these, you want to note that we're using actual CSS. Our values are separated by semicolons, and our values aren't being passed in as strings. Additionally, we're going to use them with React's class name prop.

[01:28] While inside class name, we can pass in template strings and then interpolate the values that we just defined. There, we see that this button has our styles. The one on the right doesn't exactly have the styles, but because we're inside a flex layout, it's pushing it down so they have the same height.

[01:55] There we go. Now we have these styles showing up in both of our buttons. Let's say that I want to make this click-to-proceed button a success button. I'm going to say CSS, and I'm going to give it the color of green. I'm going to say font weight, 600. Just to see this in better reaction, I'm going to add a purple color property. Now it says it's showing up.

[02:32] If we try to use that success button, see that? This is still purple. Our button's still purple at left. This is a direct result of the CSS rules. Since our button styles are being defined below our success button, this purple color is going to take precedent over this green color.

[02:50] Enough CSS talk. How do we get through this? One way is to use the CSS import directly inside of our class name prop to compose classes together. As a result of this, anything we do here, background, let's say teal. It's a cool color. It doesn't look that good. Let's say orange.

[03:14] All right, neat. We got this working. Let's wrap this up by checking out another way in which we could compose styles together. I'm just creating a cancel button variable, and I'm going to set it equal to CSS. Instead of template strings, I'm going to set the color to red and the font weight again to 600.

[03:40] Instead of trying to use these values directly inside of our class name prop, we're going to interpolate the value of button styles directly inside of the template strings in which our cancel-button CSS is defined.

[03:55] We can then interpolate for this class name. As we see, our styles are reflecting directly inside of our page. If I change this background to gray, we see that. I could change this to black, and give us some Halloween colors here.