We can use the code below to do this: // app.js The next step will be to create a component to show our card. This will add the dependencies to the project and get us ready to style our application. Installing Styled ComponentsĪssuming we already have a React js project set up, we can add Styled Components to the project by running npm install styled-components or yarn add styled-components in the terminal. The documentation for each of these is pretty good to learn the basics and see which feels most comfortable. I will be using Styled Components in this post, although I’d suggest checking out each of these since each has it’s own syntax and works a bit differently. A few of these libraries are: Styled Components, Radium, Aphrodite, or Emotion. Since then, many different libraries have been created to try and make this concept a reality. The concept of CSS-in-JS started making waves when it was discussed in 2014. Let’s get into each a bit more so you can decide which you prefer! I’m sure there are use cases where each is more appropriate, although I find myself reaching for Sass more often.

I don’t know that there is necessarily a “correct” answer. Is it better to write our styles right inside our component? Should we keep our styles separate from our javascript? The primary reason for the debate has to do with separation of concerns. You could use these in Vuejs, Angular, or anything else you’re building in javascript. It should also be noted that these aren’t React specific. The other tool is called Sass, which has been a popular tool for the past few years in the javascript world.įor each example, we’ll be creating a social card component with an image, username, timestamp, user photo, and status. The two tools we’ll be covering today are Styled Components, which is a CSS-in-JS library that makes it easy to implement in a React js project. This post is not to agree or disagree with any of those viewpoints, but rather to give an introduction so you can decide for yourself. There is a battle raging in the online development community about whether or not people should be using CSS-in-JS, or CSS-in-Javascript. Today we will be covering a few popular methods to style our React JS applications such as Styled Components and Sass to explain the benefits of both. How to Use Sass and Styled Components in a React JS Application

For each reactjs