You'll see that it is underlined. We have this style prop value must be an object, and I believe this will not work in the application. As you can see, nothing is rendering here. So when doing styles this way, we have to make use of CSS in JS. So the idea is to write your CSS as a JavaScript object, so any properties that have a dash in them have to be camel case, and the values have to be defined as a string. So let's convert this over. So it has to be an object. Let's do it inline here. And red just has to be a string here, and this should work.

And we'll take a look at a few popular ones later on. So let's just go back here. You can define an object up here or anywhere else. So we can say const style equals an object, and we can say color: red in here. And let's also add a backgroundColor property. Again, in CSS, it's background-color. But as a object, we have to define it in CamelCase, so backgroundColor, let's say white. And down here, we can just use that style object. Okay, save that. And that should work.

Okay, save that. And that should work. And it does. Cool. And again, you can take this as far as you like. Whatever you can do with JavaScript objects works fine. For example, if we wanted a nested object, say it was named paragraph, we can do that and nest this within here, that should be fine. And this should be style.paragraph. That should work.

And this should be style.paragraph. That should work. Okay. And we can have multiple objects for our different styles. Say we had something else here, another, and we can say color blue. And that should work as well. So say, for example, I had something else in here, this should be blue. We can do the same thing, style equals style.paragraph. That should be blue. And I meant style.another here.

Let's grab our style here. Let's put it within that external file, and then we can import it in here. So let's put it here. Let's make sure to export it. export const style. Okay. And then we can import it in here. We can say import styles from, should be in here, styles.css, or you can do it without the extension too. Sorry, it's named style.

the extension too. Sorry, it's named style. And this should still work, but now it's in a separate file. And it does. Cool. Okay. Next, let's take a look at CSS modules. So CSS modules allow you to scope your CSS to a certain component. So let's add a child component here. Let's name it child.jsx.

So let's add a child component here. Let's name it child.jsx. Let's just make it a React functional component. Okay. Let's use it in our app.jsx anywhere here. Let's just put it here. Let's say child. Okay. This should import it. Let's close that out.

This should import it. Let's close that out. Let's make sure it renders here. There it is. Okay. And pretend this was a big application and you wanted to add a new feature. You go ahead and make this component and you add some styles to it. So let's go ahead and do that. Let's make a style sheet called child.css, and we'll make use of it in here. child.css.

Let's make a style sheet called child.css, and we'll make use of it in here. child.css. And say by accident, you added a class that already existed. So say for example, let's add this class. So let's use that within our child.css. And let's change the color here. Again, pretend like you didn't know this class existed. Let's make it green to use it in our child component. Let's just say className equals that class. It was app-link.

Let's just say className equals that class. It was app-link. Okay. So let's save that. So before I save that, it's actually being used right here. So learnReact is this light blue. But if I save that, they are still both light blue because I didn't import it. So we can import it within our child.css here. Import it's child.css. And now you'll see that it's going to override the other style here.

Import it's child.css. And now you'll see that it's going to override the other style here. So they should now be both green. So by accident, you changed the styles of the rest of the application, which obviously is a bad thing. An obvious fix would be to just change the class name. But another one is to just scope the styles to this specific component. So you would make use of CSS modules for that. So if you've used Vue before and you use style scoped, it's pretty much the same thing. So to get that working, we have to rename our CSS file here to .module.css.

So if you've used Vue before and you use style scoped, it's pretty much the same thing. So to get that working, we have to rename our CSS file here to .module.css. So let's go ahead and do that. Module.css. Okay. And within the component, we have to import it like that now, but give it a name. So let's say import styles from child.module.css. And I forgot the from keyword. Okay. And module.css.

Okay. And module.css. I don't think we need the CSS, but I think it works with it as well. I'll just leave it. And now we can make use of the style like this. So instead of just the string, let's say styles.app-link. And since our class name has a dash in it, we have to use the array syntax. So app-link. But if it didn't, you don't have to. And now you'll see that both colors are different and we didn't break the original style here.

But if it didn't, you don't have to. And now you'll see that both colors are different and we didn't break the original style here. So again, these CSS rules, in this case, child.css or child.module.css is scoped to only this child component here. And if you take a look at what's happening, if we open up DevTools here, so if you take a look at the child element, you'll see what's happening to the class name is that the component name is being added before and a hash is being added at the end. So this ensures that it's unique and scoped to this particular component only. Okay. Now let's take a look at some CSS in JS libraries.

Let me stop my server. Let's install that. Okay. Let's start my server again. And I am going to just start fresh with a new app.jsx just so there's no other styles being imported. So I'm going to rename the current one to app_original. And then we'll make a new one here called app.jsx again, which is just blank. Okay. And this should do.

Okay. And this should do. Hopefully this works. Okay. Let's start off with the most basic example here. So I'm just going to make another container, make another div here and let's put a button within here. Let's actually give it a class name of button here. And we'll just say myButton. So let's add an external CSS file.

And we'll just say my button. So let's add an external CSS file. Let's just name it styles.css and we'll add a class for button, styles.css.button. And I'm just going to paste in some styles for a button. Okay. Let's save that. Let's import that within our app.jsx. So import styles.css. And let's see if that renders in the browser. Okay.

Okay. So that's how you would do it normally. Again, you can use CSS and JS if you like. But with styled-components, the idea is you make your own component and define the styles right within there. So the syntax might look weird at first, but let's just take a look at it. You have to import it first, actually say import styled from 'styled-components'. Okay. So here's what you would do to replace this element right here. So you would define a new component.

So here's what you would do to replace this element right here. So you would define a new component. So let's call it MyButton. And we can say styled.div and give it an HTML element. In this case, it's a button. So this will compile down to a button similar to this. And then here we use backticks and define CSS within here. So again, this is traditional CSS. You don't have to do CSS in JS. So let's just grab the styles from our style.css here and paste it within there.

Let's take a look at DevTools here to make sure that it is a button. And it is. Cool. So we have this random class, but we do have the correct styles for it here, which we defined in our styled component. So as another example, say we wanted a container here that constrained the content within a certain width. Let's go ahead and do that. So usually you'd add a class here, but in this case, we'll make another styled component called myContainer const.

So usually you'd add a class here, but in this case, we'll make another styled component called myContainer const. myContainer equals styled. And again, any HTML element in here should work. For example, if you wanted it to be a section, that should be fine. But I'll just stick to a div here and let's just do margin auto, or let's say 20px top and bottom and then auto to center it and then maxWidth, say 600px. Okay. So again, now we can replace this div here with that component, myContainer, and hopefully that should work.

So again, now we can replace this div here with that component, myContainer, and hopefully that should work. So let's save that. Check out our browser. And you can see now it's in the middle here. You can see we do have this container class right here. And you can see the styles right here. So yeah, one of the benefits is that styled components sort of forces you to write components, which is a good thing. This looks pretty clean to me.

which is a good thing. This looks pretty clean to me. There's no class definitions within here. And all of that is extracted to a styled component. If you want, you can even get rid of this div here and just make it a fragment. Okay. So another thing you can do is make use of nested selectors. So if you've ever used Sass before, you're probably used to the syntax. So for example, if I wanted to add a hover on the button, we can use the ampersand syntax, colon, and then hover.

So if I wrap this in a span, that should apply those classes. Or let's leave this one, make another one, and wrap this one in the span. And hopefully this one applies those styles. And it does. Cool. You can also pass in props from the parent component into the styled component. So say for example, we wanted different color buttons. Let me just remove this one here. So yeah, you can override the style like this. We can say style equals, and then we can say background red or whatever, and that should.

So yeah, you can override the style like this. We can say style equals, and then we can say background red or whatever, and that should work. Let me just try this out. We should override the style, and it does work. But another way is to pass in a prop. So let me show you that way. Let's just undo here. We can just say bg equals red. And then from within the styled component, so up here, we can accept the prop like this.

We can just say bg equals red. And then from within the styled component, so up here, we can accept the prop like this. So instead of hard coding it here, we are now accepting a prop. So we can use the ${{}} syntax. We can accept the props, and then we can use it here. So in this case, props.bg. Okay. Save that. We only have one here. Let's add a few more.

Let's grab all of this. Let's cut it out. Let's make a new file here. And in terms of the convention or where to place things, it's completely up to you, but I've seen a few approaches. So one is to name the style the same as your component, so in this case, app. And you can say something like style.js or styled.js to indicate that it's a styled component. So I'll take that approach here. But you can also put it in a styled folder or structure it however you like.

Let's save that. And now we can import it from our main component. So we have import. We have myButton and myContainer from, in this case, it's in the same folder, app.styled. And this should still work, but now it's in its own file. Save that. And everything still works. So yeah, there's definitely more features to style components, but it is a very popular choice in the React community when it comes to writing your CSS. Let's take a look at one more CSS and JS library named Emotion.

We still have the backticks and we can write our CSS like we normally would. It also supports the nesting syntax, similar to styled-components as well. So let's just grab this whole thing and paste it in our code. So this is getting it from a variable, but I'll just hard code this. And let's see if this renders in our app. Okay. And there it is. And it does work. And again, I meant to make that a button. So let's change this.

So again, basically the same thing here. I'll just remove this. And we'll say an object instead of this CSS prop here, or not the prop, but the CSS backtick call. Okay. No more backtick. Let me just change this to a valid object. Okay. This should be a valid object now. And let's see if that renders.

This should be a valid object now. And let's see if that renders. And it does. Cool. So again, you have options here. You can do it the CSS way if you prefer to write your CSS this way, you can do it the object way, and you can even use the styled component syntax if you like. So again, let's take a look at the example here. Let's make sure to import it first. So let's grab this.