How to dynamically update SCSS variables using ReactJS?

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:
We are going to create a card component using JSX and style it using SCSS.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.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.We are going to use useEffect react hook that will fire up every time there is a change in the state of ‘darkTheme’.useEffect will cause a side effect and change the value of SCSS variables : $background-color and $text-color.
We are going to create a card component using JSX and style it using SCSS.
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.
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.
We are going to use useEffect react hook that will fire up every time there is a change in the state of ‘darkTheme’.
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 =    "https://media.geeksforgeeks.org/" +    "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:
Picked
React-Questions
Technical Scripter 2020
ReactJS
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Axios in React: A Guide for Beginners
How to pass data from one component to other component in ReactJS ?
Re-rendering Components in ReactJS
ReactJS defaultProps
How to create a table in ReactJS ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Differences between Functional Components and Class Components in React