Install glamorous to start styling React components

Here we have a react application, and I'm going to install glamorous inside of this application. Run npm install glamorous. Glamorous depends on a CSS and JS library called Glamor. Glamorous also depends on prop types and react, if you don't have those installed in your application already. Go ahead and install those.

With those packages installed, we can double check our package JSON here, just to make sure we got those installed in our dependencies. With those installed, let's go ahead and we'll import the DIV component from glamorous.

I'm going to just swap on this DIV with a glamorous DIV. We'll have to go down here, swap that app as well. Then, we'll go ahead and start our server. With our app restarted, everything looks just perfect. Let's go ahead and inspect this.

If we look here, we have the data reactive class has the glamorous DIV class name in there. We know that glamorous is rendering this. Let's go ahead and just do a quick little change here. With the built-in glamorous components, we can actually swap out this. Add class name with the specific CSS that we want to have applied.

We'll say, instead of the class name text align center, we save that, and then we'll see that we no longer have that class name, and we have text align center coming from the glamorous class name for this DIV.

As a quick review, you need to install glamorous and glamour prop types into your project. Naturally, also, you're going to need react and you're good to go.