Learn React 18: Using CSS Modules

CSS modules make sure that your CSS is locally scoped by adding a unique hash to your class names. You will understand it better once we use CSS modules for styling our random number generator app.

In this lesson from our free full-length beginner course on React 18, you'll learn how.

Take the Course for Free

It is possible to use React without any toolchain and integrate it directly into your existing website by using simple script tags. However, using toolchains will speed up your development, give you access to additional features, and allow you to detect mistakes in your code.

One popular tool for building new single-page apps is Create React App. You can get started with it by running a single command. Here, rgen-app is simply the name of your app.

1	npx create-react-app rgen-app

This will install a bunch of packages and tools for you like webpack, Babel, ESLint, etc. The feature of Create React App that we will discuss in this tutorial is the ability to use CSS modules.

What Are CSS Modules?

CSS rules have global scope. This means that any CSS rules that you define will apply to all elements with the same class. This is indeed what we want to happen. Defining the same rules again and again would be very cumbersome.

However, things can get tricky when we are working on large projects. One problem could be name collisions. For example, a lot of elements in your project might require wrapper div tags around them for proper styling. However, you probably want these wrappers to have different values for properties like margin and padding. This will require you to write CSS that uniquely targets these wrappers. It will get hard for you to keep track of all the unique class names or specific CSS selectors and avoid any collisions.

For another example, consider two developers who are working on two independent components for a larger project. They might use the same class names for some of the elements, which could ultimately result in conflicts due to the global scoping of CSS.

CSS modules will help you solve these problems. They make sure that your CSS is locally scoped by adding a unique hash to your class names. You will understand it better once we use CSS modules for styling our random number generator app.

Let's get started.

Setting Up the Project

Execute the following command in a directory of your choice to install everything needed for setting up the Create React App tool.

1	npx create-react-app rgen-app

This will create a bunch of files in different directories. However, we are concerned only with the src directory for now. Delete all the files in the directory and create three new files named index.js, RandomGenerator.js, and RandomGenerator.css.

Place the following code inside the index.js file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import RandomGenerator from './RandomGenerator';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <RandomGenerator low={500} numRange={1000} />
);

Place the following code inside the RandomGenerator.js file:

import React from 'react';
import './RandomGenerator.css';

class RandomGenerator extends React.Component {
    constructor(props) {
      super(props);
      
      this.rangeInput = React.createRef();
      this.lowInput = React.createRef();
  
      this.state = {
        numberRange: props.numRange,
        lowerLimit: props.low,
        randomNumber: Math.floor(Math.random() * props.numRange) + props.low
      };
      
      this.handleSubmission = this.handleSubmission.bind(this);
    }
    
    handleSubmission(e) {
      e.preventDefault();
      
      let newRange = parseInt(this.rangeInput.current.value);
      let newLow = parseInt(this.lowInput.current.value);
  
      
      if(isNaN(newRange) || newRange < 0) {
        newRange = 0;
      }
      
      if(isNaN(newLow) || newLow < 0) {
        newLow = 0;
      }
      
      this.setState({numberRange: newRange, lowerLimit: newLow});
      
      this.lowInput.current.focus();
    }
  
    componentDidMount() {
      this.numTimer = setInterval(() => {
        let tempVal = Math.floor(Math.random() * this.state.numberRange) + this.state.lowerLimit;
        this.setState({ randomNumber: tempVal });
      }, 2000);
    }
  
    componentWillUnmount() {
      clearInterval(this.numTimer);
    }
  
    render() {
      return (
        <div class="container">
          <h1>Random Number Generator</h1>
          <div className="range-container">
          <p className="capitalized">Lower Limit: {this.state.lowerLimit}</p>
          <p className="capitalized">Upper Limit: {this.state.lowerLimit + this.state.numberRange}</p>
          </div>
          <h2 className="random-number">{this.state.randomNumber}</h2>
          <form>
            <input type="number" ref={this.lowInput} />
            <input type="number" ref={this.rangeInput} />
            <button type="submit" onClick={this.handleSubmission}>Submit</button>
          </form>
        </div>
      );
    }
}

export default RandomGenerator;

Place the following code inside the RandomGenerator.css file:

body {
    margin: 20px auto;
    font-family: 'Lato';
    font-weight: 300;
    text-align: center;
}

h1 {
    font-family: 'Aclonica';
    font-size: 3.5rem;
}

.random-number {
    font-size: 4rem;
    background: orangered;
    color: white;
    width: fit-content;
    display: inline-block;
    padding: 0 1rem;
    border-radius: 10px;
}

.capitalized {
    text-transform: uppercase;
    font-weight: bold;
}

form {
    display: flex;
    gap: 2rem;
    margin: 0 auto;
    justify-content: center;
    flex-direction: column;
    width: 80%;
}

input {
    border: none;
    border-bottom: 2px solid black;
    font-size: 2rem;
    font-family: 'Lato';
    outline: none;
}

input:focus {
    border-bottom: 2px solid blue;
}

button {
    border: 2px solid black;
    font-size: 2rem;
    padding: 0.5rem 2rem;
    font-family: 'Lato';
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
}

.range-container {
    display: flex;
    gap: 4rem;
    justify-content: center;
}

.range-container p {
    font-size: 1.5rem;
}

The output of the code above should be similar to the following image:

The markup generated by the app should look as shown below:

Using CSS Modules

You only have to make small changes to the RandomGenerator.js and RandomGenerator.css files to start using CSS modules.

Let's begin with the CSS file. First, rename it to RandomGenerator.module.css. Now, convert your class names that are in kebab-case to camelCase. For example, range-container becomes rangeContainer, and random-number becomes randomNumber. The CSS file should be updated to have the following rules:

.randomNumber {
    font-size: 4rem;
    background: orangered;
    color: white;
    width: fit-content;
    display: inline-block;
    padding: 0 1rem;
    border-radius: 10px;
}

.rangeContainer {
    display: flex;
    gap: 4rem;
    justify-content: center;
}

.rangeContainer p {
    font-size: 1.5rem;
}

When modifying the RandomGenerator.js file, we will begin by updating the import statement for our CSS.

1	import './RandomGenerator.css';

will become:

1	import styles from './RandomGenerator.module.css';

Using styles is a convention here, and you can use another word if you like. This styles object will give you access to the class selectors from the CSS file.

Modify the render() method of the component so that it looks as shown below:

render() {
  return (
    <div class="container">
      <h1>Random Number Generator</h1>
      <div className={styles.rangeContainer}>
      <p className={styles.capitalized}>Lower Limit: {this.state.lowerLimit}</p>
      <p className={styles.capitalized}>Upper Limit: {this.state.lowerLimit + this.state.numberRange}</p>
      </div>
      <h2 className={styles.randomNumber}>{this.state.randomNumber}</h2>
      <form>
        <input type="number" ref={this.lowInput} />
        <input type="number" ref={this.rangeInput} />
        <button type="submit" onClick={this.handleSubmission}>Submit</button>
      </form>
    </div>
  );
}

Our random number generator app will look the same, but the class names attached to different elements will have changed. Here is what the new markup will look like:

Did you notice that React prepended and appended the class name with the component name and a hash respectively? This way, it makes sure that there are no name collisions in selectors.

Final Thoughts

Using CSS modules when developing your React app means that you no longer have to worry about new style rules messing up your layout. You can also use them in conjunction with regular CSS to get the best of both worlds.

1	import React from 'react';
2	import './RandomGenerator.css';
3
4	class RandomGenerator extends React.Component {
5	constructor(props) {
6	super(props);
7
8	this.rangeInput = React.createRef();
9	this.lowInput = React.createRef();
10
11	this.state = {
12	numberRange: props.numRange,
13	lowerLimit: props.low,
14	randomNumber: Math.floor(Math.random() * props.numRange) + props.low
15	};
16
17	this.handleSubmission = this.handleSubmission.bind(this);
18	}
19
20	handleSubmission(e) {
21	e.preventDefault();
22
23	let newRange = parseInt(this.rangeInput.current.value);
24	let newLow = parseInt(this.lowInput.current.value);
25
26
27	if(isNaN(newRange) \|\| newRange < 0) {
28	newRange = 0;
29	}
30
31	if(isNaN(newLow) \|\| newLow < 0) {
32	newLow = 0;
33	}
34
35	this.setState({numberRange: newRange, lowerLimit: newLow});
36
37	this.lowInput.current.focus();
38	}
39
40	componentDidMount() {
41	this.numTimer = setInterval(() => {
42	let tempVal = Math.floor(Math.random() * this.state.numberRange) + this.state.lowerLimit;
43	this.setState({ randomNumber: tempVal });
44	}, 2000);
45	}
46
47	componentWillUnmount() {
48	clearInterval(this.numTimer);
49	}
50
51	render() {
52	return (
53	<div class="container">
54	<h1>Random Number Generator</h1>
55	<div className="range-container">
56	<p className="capitalized">Lower Limit: {this.state.lowerLimit}</p>
57	<p className="capitalized">Upper Limit: {this.state.lowerLimit + this.state.numberRange}</p>
58	</div>
59	<h2 className="random-number">{this.state.randomNumber}</h2>
60	<form>
61	<input type="number" ref={this.lowInput} />
62	<input type="number" ref={this.rangeInput} />
63	<button type="submit" onClick={this.handleSubmission}>Submit</button>
64	</form>
65	</div>
66	);
67	}
68	}
69
70	export default RandomGenerator;