CSS Modules With React — Better Way To Style React Apps

Binod Kafle
Jan 30 · 3 min read

React supports two ways to style elements by default: the style prop, the style tag i.e. inline CSS and CSS style sheets. There are few major downsides coming with inline CSS styles. We cannot use CSS pseudo-classes such as :active, :focus, :hover, ::before, ::after etc and media queries. Also, Styling elements can become very challenging at scale following this approach.

CSS Modules

According to the repository:
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

How to use CSS Modules after Create-React-App version 2 ?

Create-React-App supports CSS Modules right out of the box as of version 2, which is now stable. We just have to create a file with the extension .module.css

For example:

.myStyle {
color: #fff
}

Then we can use it like so:

import React from 'react'
import styles from 'mycssmodule.module.css'

export default () => <div className={styles.myStyle}>We are styled!</div>

How to use CSS Modules before Create-React-App version 2 ?

Most of the configuration for react application to work with CSS modules will be done in the Webpack configuration file. So assuming we have set up a react application using create-react-app, we will need to take control of the configuration of our app using the eject command. After ejecting, we edit a Webpack config file that’s made available by ejecting. This file might look slightly different for you.

The ejected config folder looks like this:

config folder after ejecting

You can look for an entry that starts like this (in the webpack.config.js file):

{
test: /\.css$/,
...
}

and then edit this entry.

This entry can look slightly different. You’ll have to find the following part in your webpack.config.js file:

{
test: cssRegex,
exclude: cssModuleRegex,
...
}

and then edit that entry.

Finally, it should look like this:

{
test: cssRegix,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}),
}

In my react version of 16.12.0, I was also able to load CSS Modules by changing my common function to get style loaders to the following:

// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
},
{
loader: require.resolve('css-loader'),
options: {
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]"
}
}

}

WesionaryTeam

We ❤︎ Technology!

Binod Kafle

Written by

WesionaryTeam

We ❤︎ Technology!

More From Medium

More from WesionaryTeam

More from WesionaryTeam

Intro to Redux (React-Redux).

230

More from WesionaryTeam

More from WesionaryTeam

More from WesionaryTeam

Animating Colors in React Native

64

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade