Style a React Input Component with CSS-in-JS

Instructor: [0:00] Here's our app. As you can see, when we load the page, you can't see the input to send a new message, so we want to style this so that the input is stuck to the bottom of the page. We don't need this onSubmit anymore, so let's just await that. Then, we can wrap this in a div.

[0:24] Now, we'll give this container div a min-width, so style = min-width of 400. In React, when you don't designate a unit and just enter a number, the width will default to pixels.

[0:40] Let's go into our input. Let's make some changes to our form input. The first thing we want to do is add style =...First, let's add position is sticky and bottom is . We want the form to be zero pixels from the bottom. Here, you can see that now we have the form appended to the bottom of our screen.

[1:10] Now let's style our input. Just as before, style equals an object. We'll add width of 100 percent. We'll make the position absolute, the left zero and the top zero. Now we'll add a border of one pixel. It will be solid. Then we want a gray color, so A9, A9, A9, like that.

[1:53] We want the border radius to be 20 pixels. We want to add some padding, so we'll go 5 pixels in 15 pixels. This will make the input a little bit further in so that we don't feel squished to the side of the input component. We will add a background of a dark gray.

[2:22] Because our background is dark gray, we want our text color to be white. While we're here, let's add a placeholder message. You can see that in our CSS, our button has disappeared. Now we need to add some styles there, so style. We'll go position absolute and go right is -30 pixels and top will be 2 pixels. We're going to add a border radius of 100 so that it's circular instead of submit.

[3:16] We're going to use this Ascii arrow so now it looks like that. We'll make the background the same color as this blue. We'll make the color white. We'll get rid of the border. That's looking a little small so we'll add a little bit of padding, straight three pixels. We'll make the width 23 pixels.

[3:51] We'll make the font weight 900, make it a little bolder. Let's increase the font size to 15 or 16. Let's go over to our comments. We'll add an overflow hidden and then an overflow-y scroll. Then we'll add a max height of 560, a width of 400.

[4:39] You can see that we're getting a little bit of white down here and that is because unordered lists have margin by default. We'll have to go margin zero. This is looking pretty good. One thing I want to do is when you're the current person, your messages show up over here in blue. You don't necessarily need to see your user name.

[5:05] In here, I'm going to go commentnode.viewer did author. If that's not true, then we're going to display this H3. Then I want to adjust the styling just a little bit. I'm going to add a style object here. I'm going to pull background and border radius off of the LI.

[5:37] We'll save and put this up here so let's style the H3 a little bit. We'll give it a font size of 16. We want the username to align over on the left, so that means text align is justified. That's a little too far, so we'll add some margin on the left. Margin left is 25.

[6:19] We can see that there's a lot of margin here. If we inspect and click here, we can see that the margin is coming from the p tag. We want to add a margin of zero. We want a little bit of margin so let's add margin bottom five. We can see that this is overflowing a little bit. Let's move this padding down to the p tag.

[6:55] I don't like how prominent this color makes the user name because it's not necessarily the most important information. I'm going to make it a little bit of a gray color, so color. Now it's a nice gray color but the information is still there.

[7:16] Now this is looking a lot better. When we type in here, we get a nice white so we can see what we're typing. We can scroll and see all of the messages that have happened.