20-Dec

How to CSS in React

A hot topic these days, and I don't think we'll ever agree, but here are some ways to do CSS in your React app

3 min read

By Eirik Luka

December 20, 2018

Getting started using Create React App

If you are starting from scratch, Create React App is a great way to get started. Without any configuration you can import your CSS files like you import your React components. Since CRA uses Babel you can also use ES6 imports for this

import "./App.css";

Since CRA version 2.0, support also includes auto-prefixing, so there is no need to write browser specific CSS like -webkit-* or similar prefixes anymore.

CRA + Sass

Using Sass is also available, just make sure you add node-sass to your project. Then you can import your .scss-files directly

import "./App.scss";

CSS preprocessors like Sass or LESS build upon CSS and add features like variables, functions, mixins and nesting. CSS variables is already supported in some browsers, but lack of support in IE and Edge still is a deal breaker for many.

CSS Modules

CRA also supports CSS Modules. For each component you want to style you can now create an associated CSS-file, just add .module.css (or .module.scss if you're using Sass) to the file name:

import styles from "./main-title.module.css";

const MainTitle = () => {
  return <h1 className={styles.mainTitle}>CSS Modules</h1>;
};

Using CSS Modules allows you to scope your CSS to the component, meaning if you have another component that has a class .mainTitle it will not be affected. If you inspect your component in your browser the actual class name will be postfixed .mainTitle__yLE5s making it unique for that component.

But I don't use Create React App

Well, then you have to do the build setup yourself, but it is still possible to use CSS Modules, Sass, LESS, and there are plenty of tutorials out there to help you get going. Here is an example using LESS and CSS Modules.

So... CSS-in-JS 💥

So very simply put, CSS-in-JS basically allows you to create component scoped CSS by specifying it directly in JavaScript. Similar to CSS Modules you will get unique classes for each component preventing different component styles for overwriting each other.

Keep in mind, CSS-in-JS and inline styling are not the same thing. Inline styling adds the styling directly to the component, which gives you less control over your styles, decreases performance, doesn't support pseudo classes, and should be avoided.

Let me show you an example how CSS-in-JS works using the styled-components library:

import styled from "styled-components";

const MainTitle = styled.h1`
  font-family: sans-serif;
  text-decoration: underline;
`;

const MyComponent = () => <MainTitle>CSS-in-JS! Yeah!</MainTitle>;

This will give you something like this

<style>
  .sc-emjYpo {
    font-family: sans-serif;
    text-decoration: underline;
  }
</style>

...

<h1 class="sc-emjYpo gyAZJU">CSS-in-JS! Yeah!</h1>

The <style> is applied to the top of the DOM with a unique class name for your component.

There are several libraries you pick from. Emotion, styled-components and JSS are three examples. You don't need any additional build steps to get started, just add your desired library to your project. This site is built with styled-components, and it works just fine!

Using JavaScript to describe how your components look is appealing to many, and has both pros and cons. In this Gist, Sunil Pai tries to shed some light on the advantages and disadvantages of CSS-in-JS. I recommend reading both his post and the following discussion if you're interested.

What should I use?

There are many good reasons to use any of the mentioned ways to style your app, but there is no right answer. Pick the one that best suits your needs and stick with it. If you can't decide take some time to read some posts about the advantages of the different libraries/frameworks.