How to dynamically refer the properties from a CSS file in a React component?

CSS Modules allow you to import CSS class names from a CSS file and reference them dynamically in your React component without the risk of class name collisions.

 

Steps

1. Create a CSS file with a .module.css extension. CSS Modules require the specific naming convention (*.module.css) to ensure that styles are scoped and processed correctly. If you use a regular CSS file (e.g., styles.css), the styles will not be scoped, and you should import them directly without using module syntax.

 

For scoped styles, use files with the .module.css extension and import them as modules. For global styles, use regular .css files and import them directly.

 

styles.module.css

/* Default styles */
body {
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

/* Light Theme */
.light {
    background-color: lightgray;
    color: black;
    border: 1px solid #ccc;
    padding: 20px;
    width: 250px;
    height: 250px;
    margin: 20px;
}

/* Dark Theme */
.dark {
    background-color: black;
    color: white;
    border: 1px solid #444;
    padding: 20px;
    width: 250px;
    height: 250px;
    margin: 20px;
}

 

2. Import the CSS module into your React component.

import styles from '../css/styles.module.css'

export default function BoxComponent(){
    return (
        <div>
            <div className = {styles.light}></div>
            <div className = {styles.dark}></div>
        </div>
    );
}

 

1.   The styles.light and styles.dark dynamically refer to the classes defined in the styles.module.css file.

2.   The class names are locally scoped, meaning they won’t conflict with any other CSS.

 

Follow below step-by-step procedure to build the complete working application.

 

Step 1: Go to the post (Quickly Set Up a React Project with Vite: A Step-by-Step), and set up a React Project ‘refer-prop-from-css-file’.

 

Project structure looks like below.

 

Step 2: Create a css folder in src/ folder and define styles.module.css file.

 

styles.module.css

/* Default styles */
body {
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

/* Light Theme */
.light {
    background-color: lightgray;
    color: black;
    border: 1px solid #ccc;
    padding: 20px;
    width: 250px;
    height: 250px;
    margin: 20px;
}

/* Dark Theme */
.dark {
    background-color: black;
    color: white;
    border: 1px solid #444;
    padding: 20px;
    width: 250px;
    height: 250px;
    margin: 20px;
}

Step 3: Create components folder in src/ folder an define BoxComponent.

 

BoxComponent.jsx

import styles from '../css/styles.module.css'

export default function BoxComponent(){
    return (
        <div>
            <div className = {styles.light}></div>
            <div className = {styles.dark}></div>
        </div>
    );
}

Step 4: Update main.jsx file.

 

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import BoxComponent from './components/BoxComponent'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BoxComponent />
  </StrictMode>,
)

Step 5: Build and run the Application.

cd refer-prop-from-css-file
npm install
npm run dev

Open the url ‘http://localhost:5173/’ in browser, you can see below screen.

You can download this application from this link.

 

Note

In CSS, class names that contain hyphens (e.g., my-class-name) can be a bit tricky to reference in JavaScript (including React) because hyphens are not valid characters in JavaScript variable names. If you are using CSS Modules and your class name has hyphens, you need to use bracket notation to access the class.

 

styles.module.css

/* styles.module.css */
.my-class-name {
  color: blue;
}

 

Here is the component.

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

function MyComponent({ isActive }) {
  return (
    <div className={isActive ? styles['my-class-name'] : styles.anotherClass}>
      Hello, World!
    </div>
  );
}

 

In this case, I used styles['my-class-name'] to access the class.

 

Previous                                                    Next                                                    Home