Open In App
Related Articles

How to dynamically update SCSS variables using ReactJS?

Improve Article
Save Article
Like Article

In React sometimes we might need to dynamically update the styling due to user interaction and change in the DOM. In the case of SCSS variables, we can dynamically update SCSS variables using ReactJS.



To dynamically update SCSS variables using React JS we need to install the sass npm package that compiles and translates the SCSS file to CSS styling. We will apply a dark theme to the page when the switch button is clicked.

Steps to Create React Application and Install Modules:

Step 1: Use this command in the terminal to Initialize the react application.

npx create-react-app react-scss

Step 2: Move to the project directory.

cd react-scss

Step 3: Install the dependencies required in this project by typing the given command in the terminal.

npm i sass

Project Structure:

The project structure will look like this.

Folder structure

The updated dependencies after installing required packages.

"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"sass": "^1.69.5",
"web-vitals": "^2.1.4"
}, }

Example: This example implements dark and light theme based on the user interaction by updating the scss vaiables.


// Filename - App.js
import React, { useState, useEffect } from "react";
// Import scss file
import "./App.scss";
export default function App() {
    const [darkTheme, setDarkTheme] = useState(false);
    // React useEffect hook that will fire up
    // when "darkTheme" changes
    useEffect(() => {
        // Accessing scss variable "--background-color"
        // and "--text-color" using plain JavaScript
        // and changing the same according to the state of "darkTheme"
        const root = document.documentElement;
            darkTheme ? "#262833" : "#fff"
            darkTheme ? "#fff" : "#262833"
    }, [darkTheme]);
    const URL =
    return (
            <div className="card">
                <div className="cardBody">
                        Dynamically changing scss variable
                        using react{" "}
                        According to Wikipedia sass is a
                        preprocessor scripting language that
                        is interpreted or compiled into
                        Cascading Style Sheets (CSS).
                        onClick={() =>
                            ? "Switch to Light"
                            : "Switch to Dark"}


/* Filename - App.scss */
#root {
    // Scss variables which we gonna assign using
    // useState and JavaScript in reactJS
    $background-color: #fff;
    $text-color: #262833;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-template-rows: auto;
.card {
    background-color: var(--background-color);
    margin: 20px 10px;
    padding: 10px;
    img {
        background-color: var(--background-color);
        width: 100%;
        height: 150px;
        object-fit: scale-down;
    .cardBody {
        h2 {
            font-size: 2rem;
            color: var(--text-color);
        p {
            font-size: 1rem;
            color: var(--text-color);
        button {
            font-weight: bolder;
            border-radius: 50px;
            color: var(--background-color);
            border: none;
            border-style: none;
            padding: 10px 20px;
            background-color: var(--text-color);

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 10 Nov, 2023
Like Article
Save Article
Similar Reads
Related Tutorials