Install glamorous to start styling React components

Kent C. Dodds
InstructorKent C. Dodds
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

In this lesson we’ll learn about the things you need installed and setup to start writing React components with glamorous.

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.

egghead
egghead
~ 13 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today