Use Sass and Styled Components in a React JS
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.
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. 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.
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. The other tool is called Sass, which has been a popular tool for the past few years in the javascript world.
CSS-in-JS
The concept of CSS-in-JS started making waves when it was discussed in 2014. Since then, many different libraries have been created to try and make this concept a reality. A few of these libraries are: Styled Components, Radium, Aphrodite, or Emotion.
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. The documentation for each of these is pretty good to learn the basics and see which feels most comfortable.
Installing Styled Components
Assuming 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. This will add the dependencies to the project and get us ready to style our application.
Using a Global Theme
What if you have to update it someday? That sounds like a lot of search and replace waiting to happen. Instead we can declare the global theme variable and access it from any of our styled components. Doing so is pretty simple and is illustrated below.
These theme variables can be used in any of our components since the ThemeProvider is wrapped around our entire application. We can then add a styled component to wrap our site in which will take care of all of the global styles such as typography, input styles, and other things that should be standard across all pages.
Using Sass in a React Application
Sass was created several years ago and was originally implemented in applications built using Ruby. In recent years, it has been adapted to work with Node.js which is how we will be using it today. You may notice that we are creating "scss" files but calling it sass. This is because Sass was originally created with a certain syntax which is actually known as "Sass". Later an alternative syntax was created to closer resemble CSS, and this is called "Scss". Because Scss has the same functionality of Sass, it still falls into the category of Sass.
It is generally pretty simple to get up and running with Sass in a React js application, although it does make a difference how you go about bundling or compiling your application. In the code for this tutorial, I will be using Parcel js which is pretty easy to get up and running and handles the Sass for us. There are other libraries which are sometimes necessary such as node-sass, gatsby-plugin-sass, or next-sass.
Setting Up Our Sass Files
There are a few different ways to use Sass within a React js application. The first would be to create a component in a folder and include the styles for the component as a .scss file within that folder and import them directly into the component. I have done it this way and have found it to be easy but I didn't care for the organization so much.
An alternative is to create a Sass folder within our project and this is where our styles will live. This is the organizational method we will be using today. That being said, we will create a folder in the project called "Sass" and add a file called "app.scss". While we could put all of our styles into this app.scss file, that would get messy and wouldn't provide much benefit over normal CSS.
Instead, we will create separate files and just import them into the app.scss file. We can then import the app.scss file into our app.js file and Parcel will do the rest.
