Skip to content
Related Articles

Related Articles

How to dynamically update SCSS variables using ReactJS?
  • Last Updated : 22 Feb, 2021

We can dynamically update SCSS variables using ReactJS with the help of a project by achieving theme switching of the card component between light and dark theme. 

Prerequisite:

  • Basic knowledge of npm & create-react-app command.
  • Basic knowledge of HTML/CSS.
  • Basic Knowledge of react components & ES6.

Basic Setup: You will start a new project using create-react-app so open your terminal and type:

npx create-react-app react-scss

Now go to your react-scss folder by typing the given command in the terminal:

cd react-scss

Required module: Install the dependencies required in this project by typing the given command in the terminal.



$ npm install node-sass

For developers using yarn:

$ yarn add node-sass

Project Structure: The file structure in the project will look like this.

Folder structure

Approach:

  1. We are going to create a card component using JSX and style it using SCSS.
  2. After structuring and styling the card component, we are going to make use of react useState hook to manage the state of the ‘darkTheme’ as per the user.
  3. There will be a button with onClick event listener which will set the state of ‘darkTheme’ as false if it previously was true and vice versa.
  4. We are going to use useEffect react hook that will fire up every time there is a change in the state of ‘darkTheme’.
  5. useEffect will cause a side effect and change the value of SCSS variables : $background-color and $text-color.

Example:

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;
    root?.style.setProperty(
      "--background-color",
      darkTheme ? "#262833" : "#fff"
    );
    root?.style.setProperty("--text-color", darkTheme ? "#fff" : "#262833");
  }, [darkTheme]);
  
  const URL =
    "wp-content/uploads/20190918121833/geeksforgeeks-62.png";
  
  return (
    <>
      <div className="card">
        <img className="image" src={URL} alt="geeksforgeeks" />
        <div className="cardBody">
          <h2>Dynamically changing scss variable using react </h2>
  
          <p>
            {" "}
            According to Wikipedia sass is a preprocessor 
            scripting language that is interpreted or compiled 
            into Cascading Style Sheets (CSS).
          </p>
  
          <button onClick={() => setDarkTheme(!darkTheme)}>
            {darkTheme ? "????" : "????"}
          </button>
        </div>
      </div>
    </>
  );
}

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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :