There's not really any need for creating a mixin for these elements, 'cause we're not gonna really reuse these styles very much in other classes. We're still going to be able to call them though, so what I'm gonna do is create a forms file.

Inside our main.scss here, I can just say @import "./forms.scss" and now I can create this file, and then add each one of those new styles into it, so I'll say forms.scss is the file name, and so we want to update the text area styles, and these are gonna be global.

This is why I'm not creating a mixin and why you have to be careful with writing your styles like this because what I'm gonna do here means that every single text area in the entire application, so if you have a large application, you probably wouldn't want to do this, but every application is going to use this as its base set of styles.

You can always override them and change them, but these are gonna be the new base set of styles, so I'm gonna say textarea, and this is not a class, this is the input, so this is exactly the same as saying what we did in our mix in where we grabbed the input or this would be the same as saying I want to style all the h1's this way.

Text area is an actual HTML element, so I'm gonna save here so I can hit save in my main file, and one thing that might be a good idea, because these forms might be something we'd want to override, later on, I'm going to remove this, and I'm gonna put it right below base.

main.scss

@import "./variables.scss";
@import "./mixins.scss";
@import "./base.scss";
@import "./forms.scss";
@import "./button.scss";
@import "./navigation.scss";
@import "./portfolio.scss";
@import "./portfolio-manager.scss";
@import "./portfolio-form.scss";
@import "./portfolio-sidebar.scss";
@import "./auth.scss";

That way if I ever want say, the navigation component or the portfolio to override these specific styles, then I can do that, so inside of forms here, we have the text area and just as a place holder, and so I don't forget, I'm also gonna add a class for the select-element, and I could technically just grab the select element, but for right here, I'm gonna use a class name, and the reason for that is because I want this to be a little bit more specific.

So let's start with text area, and I want to give that teal border, so I'm gonna say border 1px, solid and then I want this to be $teal and then from there, we want a background color, so this is gonna be a background color of transparent, I want the font size to just be 1rem, and then let's go with a height of 100px, that should be enough of a height for the text areas, then I want outline to be none, and then some padding.

form.scss

textarea {
  border: 1px solid $teal;
  background-color: transparent;
  font-size: 1rem;
  height: 100px;
  outline: none;
  padding: 10px;
}

Like I've mentioned before, I don't like spending a ton of time on the styles here, because I have entire courses dedicated just to implementing styles and I have gotten quite a bit of feedback through the years from students who say they care more about learning about implementing whatever framework or language they're trying to learn, and less about the style.

So if I'm going through these a little bit fast for your taste, it's just based on feedback I've gotten through the years from students and I recommend for you to pause the video, follow along, and go at it at a little bit slower pace if you prefer. So now that we have our text area set up, let's add our select element. This one I'm gonna say I wanna have a border of 1px solid, and for this, let's just go kind of with a light gray color like this, #ccc, this is similar to our off white.

If I open up our variables, let me see what we have here. So with our off white we have this f6 one, but for right now I think I want to go with this #ccc. This is the standard one I use any time I'm wanting to do it and I don't have any variables to work with, this is a very, very light grayish color.

So border and then let's go with our font size here. Font size I think is gonna be about 80%, let's go with like a 0.8rem here, and then we'll go with width on this also being 100%, we want this stretching from left to right, we'll then have a border-radius, and the border-radius for this, the rounded edges, should be three pixels.

Overflow is going to be hidden, and then we also want this background color to be transparent, and let's see, I think with this we want outline to be none as well, and I think that is it.

forms.scss

.select-element {
  border: 1px solid #ccc;
  font-size: 0.8rem;
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
  background-color: transparent;
  outline: none;
}

These are, this is kinda the base set of styles I use for almost every select element that I usually work with. So I'm gonna grab this and inside of our select tag, let's add a className, so className="select-element".

portfolio-form.js

<select
  name="category"
  value={this.state.category}
  onChange={this.handleChange}
  className="select-element"
>

Hit save and once again, this is in the portfolio form, and because we added the text area directly, we do not have to add a className for that. So let's see if this is working, and yes, this is looking good.

This set of styles here, it's similar but it is a little bit cleaner, you can see some of the rounded corners and those kinds of things, if you notice, in the finished application, this is a little larger, which we will fix here in one of the upcoming guides, but this is still a lot better than the basic HTML version.

And as you can see our text area here is looking much better. Once we add our columns, this will stretch all the way from edge to edge, but for right now, I think that this is looking really good. So now with all of this in place, I think in the next guide, we can build out all of our columns. So what we see in the final version right here, is exactly what we should have when we're done with the next guide, so I'll see you then.

Resources

• Source Code