Css Modules | Styling | React Tutorial

Using CSS Modules for scoped styling

CSS Modules are a popular way to apply scoped styles in React applications. They allow you to create CSS files that are scoped locally to the component, avoiding naming conflicts and making your styles more maintainable. This tutorial covers how to use CSS Modules in React.

Key Points:

CSS Modules scope CSS to specific components to avoid naming conflicts.
They are imported as an object where class names are properties.
CSS Modules make your styles more maintainable and modular.

Setting Up CSS Modules

To use CSS Modules in a React application created with Create React App, you need to follow a specific naming convention. The CSS file should have the extension .module.css.

// Setting up CSS Modules
/* App.module.css */
.container {
    background-color: #f4f4f4;
    padding: 20px;
}

/* App.js */
import React from 'react';
import styles from './App.module.css';

function App() {
    return (
        <div className={styles.container}>
            <h1>Hello, World!</h1>
        </div>
    );
}

export default App;

Defining CSS Module Styles

Define your CSS styles in a file with the .module.css extension. Each class name will be scoped locally to the component that imports it.

// Defining CSS Module styles
/* Button.module.css */
.button {
    background-color: #4CAF50;
    color: white;
    padding: 15px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.button:hover {
    background-color: #45a049;
}

Importing CSS Module Styles

Import the CSS Module file as an object in your component. The class names will be properties of this object.

// Importing CSS Module styles
import React from 'react';
import styles from './Button.module.css';

function Button() {
    return (
        <button className={styles.button}>
            Click Me
        </button>
    );
}

export default Button;

Conditional Styles with CSS Modules

You can apply conditional styles by combining class names from the CSS Module object.

// Conditional styles with CSS Modules
import React from 'react';
import styles from './Button.module.css';

function Button({ primary }) {
    return (
        <button className={primary ? styles.primary : styles.secondary}>
            Click Me
        </button>
    );
}

export default Button;

// Button.module.css
.button {
    padding: 15px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.primary {
    background-color: #4CAF50;
    color: white;
}

.secondary {
    background-color: #f4f4f4;
    color: #333;
}

Composing Multiple Classes

You can also compose multiple classes by combining them into a single className attribute.

// Composing multiple classes with CSS Modules
import React from 'react';
import styles from './Button.module.css';

function Button() {
    return (
        <button className={`${styles.button} ${styles.primary}`}>
            Click Me
        </button>
    );
}

export default Button;

// Button.module.css
.button {
    padding: 15px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.primary {
    background-color: #4CAF50;
    color: white;
}

Full Example

Here is a complete example of using CSS Modules in a React application:

// App.js
import React from 'react';
import Button from './Button';
import './App.module.css';

function App() {
    return (
        <div>
            <h1>CSS Modules in React</h1>
            <Button primary />
            <Button />
        </div>
    );
}

export default App;

// Button.js
import React from 'react';
import styles from './Button.module.css';

function Button({ primary }) {
    return (
        <button className={primary ? styles.primary : styles.secondary}>
            Click Me
        </button>
    );
}

export default Button;

// Button.module.css
.button {
    padding: 15px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.primary {
    background-color: #4CAF50;
    color: white;
}

.secondary {
    background-color: #f4f4f4;
    color: #333;
}

Summary

In this tutorial, you learned how to use CSS Modules for scoped styling in React. CSS Modules allow you to create CSS files that are scoped locally to the component, avoiding naming conflicts and making your styles more maintainable. You learned how to set up CSS Modules, define and import CSS Module styles, apply conditional styles, and compose multiple classes. Understanding CSS Modules is essential for writing clean, maintainable, and scalable CSS in React applications.

React - CSS Modules