Styling React Applications

When you start writing web applications in React, sooner or later you have to handle styling. React itself doesn’t have an opinion about how to style components, so it’s on you to find something that works best for you.

Here are some of the options:

Write Oldschool CSS

This is probably the easiest way to get started. You just write css classes in your .css files, import the files into your app and apply classes to your components with the className attribute. You can write your css in nicely separated files or in one huge file but in the end all the stylings are global. To handle complexity you can use a methodology like BEM or SMACSS to keep your styles in check.

This way you can also use CSS frameworks like Bootstrap or Bulma . Just import the corresponding .css-files and you’re good to go. Remember that if you want to overwrite some styles import your own css last.

Use Component libraries

Using libraries like React-Bootstrap or reactstrap you can import pre-styled components and don’t have to write the CSS yourself. It works like this (example from the reactstrap homepage):

import React from "react";
import { Button } from "reactstrap";

export default props => {
  return <Button color="danger">Danger!</Button>;
};

This works pretty well if you’re ok with a pretty generic-looking website (you can still get a pretty original look but it will take more work) and you know that the styling won’t have to change much.

Try some CSS-in-JS

This is my currently preferred approach since it allows local CSS namespaces pretty easily. It gets a lot of probably deserved backlash but for the moment I will stick with it as it reigns-in the complexity, there are no css name-clashes and all of the component is visible in one file.
I use styled components as a library and it looks like this:

import styled from 'styled-components;

const MyWrapper = styled.div`
  display: flex;
  justify-content: center;
`;

...
  render() {
    return (
      <MyWrapper>
        <h1>Hi there</h1>
        <p>We are centered</p>
      </MyWrapper>
    )
  }
...

There’s more functionality than this: for example you can define a ThemeProvider which injects props to every component with your globally-defined stylings (for example your primary and secondary app-wide colors which you just define inside a normal object). The code is not pretty, though (see this example from the styled-components docs):

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;

CSS modules, the future?

This is something I don’t have much experience with but it sounds very promising. I will definitely start playing around with it once create-react-app 2 with support for CSS modules is released. Until then you can read a good introduction here .

Conclusion

As with most of the React ecosystem, you have a lot of options to choose from and only in the last time clear winners started to emerge (react-router v4 for routing, create-react-app for bootstrapping, etc).

I’m not totally satisfied with the styling choices but since I heard about Vue.js single file components I really like having everything about my component in one place as styled-components, for example, provides. I’m still open to new approaches to styling. Let’s see what the future brings.