← back to code snippets

React Create App + CSS Modules

Posted on December 13th, 2017 by Graeme

Starter App with Authentication

I wanted to use Firebase with React for authenticating users to my site, and came across this awesome starter app:

Create-React-App • React-Redux • Firebase

This app gets you and running with GitHub, FB and Twitter Oauth really quickly, so users can authenticate with whatever social login they want.

Create-React-App is by Facebook, and lets you quickly bootstrap apps with minimal config - everything is taken care of. Read more here. It's a great setup, but came with some limitations:

The limitation of Creat-React-App

It’s great for speed, but you're limited to the config stuff that comes with it. The main issue for me was that there's limited support for CSS Modules!

Here’s the 2 guides I followed for fixing this:

CSS Modules & Sass in Create React App – Kirsten Swanson – Medium

How to Use CSS Modules with Create React App – Nulogy – Medium

Marvel Styleguide and UI Components

I needed CSS Modules this so I could use the Marvel style guide UI Components.

First though (sidenote), in addition to what’s mentioned in the 2 articles, I had to add some presets to my webpack:

presets: ['react', 'stage-0', 'es2015']

I found that part here: Error: Missing class properties transform. · Issue #2729 · babel/babel · GitHub

Using the Styleguide

I couldn’t work how to use marveloucss, so went straight in with the styleguide.

You can just install the styleguide in your project by adding it to your package.json:

	"dependencies": {
		"marvel-styleguide": "https://github.com/marvelapp/styleguide"

This just adds the Marvel styles directly to your node_modules, meaning that you can't easily customise the colours and stuff.

Therefore, I cloned the repo to a new one of my own, and pushed it to my own private github. Now in my package.json I use this:

"marvel-styleguide": "github:graemefulton/myrepo",

This gives me control of my own version so I can change the colours in sass/theme/color-scheme.scss and compile them myself. Compare the 2 blues:

Using the UI Components

After addressing the CSS Modules problem with create-react-app, it’s possible to use the Marvel UI components in my project. Here’s a few steps for how I used it:

  • Cloned the marvel-ui repo and pushed it to my own private space. Next is why:
  • Marvel-ui uses the Styleguide above as a requirement, and I wanted to use my cloned/customised version. So in the package.json, just like before, I added ”"marvel-styleguide": "github:graemefulton/myrepo""
  • Now when I make updates to my cloned styleguide and push them, npm update can pull them into my custom marvel-ui

And here is the new blue I added coming through to the React Component library when run:

When I use my version of marvel-ui, I can now drop in components with my own style. Here's some React Component buttons I dumped onto a page:

To use my own version, like I did with the styleguide, I just refer to my custom marvel-ui repo in my project's package.json:

"marvel-ui": "github:graemefulton/my-marvel-ui-repo",

I can still pull any changes that the Marvel team make too, so it works well enough for now. There’s probably better ways!