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.
Example:
App.js
Javascript
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/neveropen-62.png"; return ( <> <div className="card"> <img className="image" src={URL} alt="neveropen" /> <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
CSS
#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:
