create-react-app with CSS Modules

 by Robin Wieruch
 - Edit this Post
create-react-app css modules, create-react-app css modules without eject

The article is a short how to use CSS Modules in your create-react-app application. It shows you how to setup CSS Modules, but also how to use them in your components.

After you have setup your application with create-react-app (e.g. create-react-app my-app), you don't need to install anything else to make CSS modules work. They come out of the box, but you have to give your CSS files the "module" prefix prior the extension: .module.css

Let's try out how CSS Modules in React work. Let's say our App component already uses a Navigation component to display links the following way:

import React, { Component } from 'react';
import Navigation from './Navigation';
const LINKS = [
{ label: 'Website', to: 'https://www.robinwieruch.de/' },
{ label: 'Twitter', to: 'https://twitter.com/rwieruch' },
];
class App extends Component {
render() {
return (
<div>
<Navigation links={LINKS} />
</div>
);
}
}
export default App;

Next, create the Navigation component in a src/Navigation.js file. As you can see, it takes a list of links as props and renders its content in a list of anchor tags.

import React from 'react';
const Navigation = ({ links }) => (
<div>
<ul>
{links.map(link => (
<li key={link.to}>
<a href={link.to}>{link.label}</a>
</li>
))}
</ul>
</div>
);
export default Navigation;

Now, let's say the following src/Navigation.module.css file has all the styles for the Navigation component. Structuring styling in a CSS modules could look the following way:

.navigation {
background-color: #222;
}
.navigation-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.navigation-list-item {
margin: 10px 20px;
}
.navigation-list-item-anchor {
text-decoration: none;
color: #ffffff;
}
.navigation-list-item-anchor:visited {
color: #ffffff;
}
.navigation-list-item-anchor:hover {
color: #525dce;
}

Now, import all styles as default by using an import statement in your src/Navigation.js file. The imported styles is an object where all the defined CSS styles can get extracted:

import React from 'react';
import styles from './Navigation.module.css';
const Navigation = ({ links }) => (
<div className={styles['navigation']}>
<ul className={styles['navigation-list']}>
{links.map(link => (
<li key={link.to} className={styles['navigation-list-item']}>
<a
className={styles['navigation-list-item-anchor']}
href={link.to}
>
{link.label}
</a>
</li>
))}
</ul>
</div>
);
export default Navigation;

In case of the navigation style, you can retrieve it with styles.navigation too. However, for the other styles with dashes you need to retrieve them with strings from the object.

Once you start your application, everything should work as expected. You can find the final application in this GitHub repository. CSS modules are only one way of styling your applications. There are plenty of other ways to do it. In React, two other common ways of styling applications are styled-components and Sass.

Keep reading about 

The article is a short how to add Sass support to your create-react-app application . It shows you how to setup Sass, but also how to use it in your components. You will learn how to style a specific…

So much has been said about the appropriate way to style modern web apps. There's the general and oldest method of styling at document level - creating a style.css file and linking to it in the HTML…

If you found this blog post helpful, please consider supporting what I do.

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.