Now React is such a flexible library that it gives you a number of options for how to add your own CSS styles into your application. The one thing that I want to reiterate before we even get into how to implement the styles, is that because there are so many ways to be able to add your own look and feel to React applications, it can get a little bit confusing.

If you went through this guide and then you go through someone else's React tutorial and then a third person's, you could very well see three different ways to implement your own styles into an application and that can be a little bit confusing. The very first thought you might have is which way is the best way? Well, there isn't really the best way, if there was then everyone would do it the same way.

But because React gives you a lot of flexibility with how to build your own applications, there are a number of different approaches. I wanna take one of the most straightforward approaches in this set of guides and I'm gonna show you some of the variations as we go through the course. But for right now, I want the main goal of this entire section to be able to build out our set of styles and not to make it overly complicated.

So what we're gonna do in this first introductory guide is take a look at our main base style set. So if I come here, I'm in my src directory, I go-to style and then main.scss, this is gonna be our Scss file and we're gonna change this up.

This is what came with the template, which can be helpful, and it gives you a few base style items. But what I wanna actually do and I kind of find that this is the easiest way to follow along, is I wanna make this main Scss file the entry point and the organizer for all of the styles for our entire application.

So what I mean by that is our main file shouldn't actually have any styles at all, it should simply import all of the other files and this is an approach I take in many different applications and I find it's much easier to wrap my head around how it works.

So let's test this out and just make sure that it's all working. I'm going to right-click in the style directory here, create a new file and I'm gonna call it base.scss and inside of this base, I'm going to pull in all of the current styles that are here in this directory.

So I'm just going to cut these and then I'm going to paste them inside of base and then inside of this main.scss file, I'm going to import, let me give us a little bit of room just to make it easier to see. So now I'm going, let me delete all that, and let me import, and because we're in the same directory we can just say import and then ./base.scss and finish that with a semicolon and make sure to wrap that inside of quotation marks.

main.scss

@import "./base.scss";

Now if I hit save, and come back to the browser, if I hit refresh I should still see all of the same styles and as you can see, all of that is there. So we have the base font that we brought in and we have all of these other items. Let's now test it out to make sure it picks up the changes.

So I'm gonna come back here and we're only gonna keep part of this code. So I'm gonna get rid of this base font size and pretty much everything, let me see, so I want to keep the body and then I wanna get rid of everything here in .app and even in the body, I'm just going to pull in some margin styles. So here, I'll just say margin equals zero pixels, hit save and now if we come back, you can see that our custom font is gone which means that all of the changes that we updated, so all of those temporary styles that we have, those are now getting picked up.

And so just so you can kind of envision for how this is going to work, this main file is only going to be a series of imports. So we're gonna import all of our styles, we're gonna import our custom portfolio item styles, our variables, anything related to our scss styling is gonna be imported here and then in each file, we're going to organize those by feature.

So let's get started and we'll start building those out in the next few guides.

Resources

• Source Code