Converting CSS In React to Styled Component

By James Quick

Styled Components is one of those interesting topics that developers love to argue about. It’s a brand new way of doing things that many people just aren’t ready to acknowledge. Regardless, just because something is different doesn’t mean it isn’t worth a try.

In this article, we are going to convert a React site using regular CSS to one that uses Styled Components. Don’t worry… if you don’t like it, you never have to use it again! 😜

What and Why – Styled Components

Again, Styled Components are debated by many, but there are some pretty cool benefits.

  • automatic vendor prefixing
  • scoping for CSS
  • leverage JavaScript syntax for dynamic CSS
  • benefits of a pre-compiler like variables and nesting

You can find more on the Styled Components Motivation Page.

Lots of people debate about whether or not JS in CSS is a good idea. J