Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:22Length:2 hours
Practical react fundamentals 400x277
  • Overview
  • Transcript

3.4 Applying Styles to Components

While the UI is not the most important part of this course, it's definitely useful to know how to create some CSS styles and apply them to your React app. And it's actually much easier than you may think!

3.4 Applying Styles to Components

As I mentioned in the last lesson, I wanna start to bring in the concept of style. And I'm gonna show you how you can do that in a typical React app. And then I'll introduce a little bit of styling for the letters that we created in the previous lesson. And then we'll start to build the style up as we go. And then obviously, you can make any sort of changes to this that you want. But I just wanna show you how to get started. So let's go ahead into our source directory. Let's create a new file, and we'll simply call this index.css. Now, within here, this is gonna be a standard CSS file, you can do pretty much anything that you want. So what I'm gonna do now is I'm going to create some styling that we can use for anything with a letter class. And let's just start to put some stuff in here. Let's say the background. We're gonna make this a white background. And let's give it a border, so each letter is gonna have a border. Let's make it one pixel. Let's make it solid, and maybe the color, let's make it like a gray maybe, just to set it off a little bit. Then we're gonna adjust things a little bit. We're gonna have this float left. We are going to give this. We're gonna increase the font size. So let's say font-size, and we're gonna make this, say, 24 pixels. We'll gonna make it fairly big. I think you're gonna wanna be able to see these letters. You don't wanna make them pop a little bit. Well, let's make them bold. So we'll say the font weight is gonna be bold. Then we can say, let's adjust the line heights a little bit. Let's make this stand out a little bit and be centered in the box, or at least take up a lot of the box here. So we'll give this a line-height. We'll say about 34 pixels. And the height, we will also make 34 pixels. And then from here, let's give it a little margin. Let's adjust the margins here. And actually, we're gonna take away a little bit of the margin right and margin left. So we're going to reduce it by one. The margin top, we'll do the same. We're gonna make this -1 pixel. And then from there we're going to take away the paddings. So we'll say padding 0, we're gonna have it like butt up against each other. And we're gonna center the letter center, the content inside of it. So we'll say the text-aLign is gonna be centered, and the width also. We'll set the width also to be 34 pixels just like the heights, so it's a square. There you go, so you can adjust this any more that you want. I think this should be fine for now. Let's go ahead and save that. So now, I have this index.css file. I had some styling in here, and now I want to apply that to some of the components that I'm creating. Or the jsx that I'm creating inside of my application. So the first thing that I have to do is I need to import that file that I created in. So I can say import, and I want to import the index.css file. So now I've brought that in. So it's gonna bring it into this file, and I can start to use some of those styles. So I called that letter. So let's come over here to this span and I'm going to call this class. Now, one thing that you need to bear in mind. When you're inside here, remember, you're not technically in HTML, so there's no class attribute in here. But there is a class name. So class name is a special React HTML attribute, as you see over here, that takes whatever you assigned to it in your jsx. And it actually applies it to this HTML element when it's rendered in the dom. So I'm gonna say the class name is gonna be equal to letter. So let's go ahead and save that and if any of this has actually worked, there you go. So now you can see, I've made this pop a little bit. Each letter or each letter component inside of my game board here has the letter class applied to it. As you can come down here and see, each of these has the class letter and those styles have been applied to each one of those. So as you can see, depending on the word that you pass in, it's going to break it up individually into each one of those letters. And just to play around with it, you can come in here and play with this a little bit. You could say TutsPlus. I could save that, and when I come back over here, it's gonna re-render it. It's gonna break it apart into these boxes, and obviously we don't want to display that to the end user right out of the gate. We're just getting things up and running. And we'll work with the actual game logic once we get all the components playing around together very nicely. So as you can see, now I can create some some CSS files, and I can import them into my JavaScript files. And take advantage of those styles inside of my components using the class name attribute.

Back to the top