How to dynamically update SCSS variables using ReactJS?
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.
Prerequisite:
Approach:
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.
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.
Javascript
// 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; root?.style.setProperty( "--background-color" , darkTheme ? "#262833" : "#fff" ); root?.style.setProperty( "--text-color" , darkTheme ? "#fff" : "#262833" ); }, [darkTheme]); const URL = "https://media.w3wiki.net/" + "wp-content/uploads/20190918121833/w3wiki-62.png" ; return ( <> <div className= "card" > <img className= "image" src={URL} alt= "w3wiki" /> <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 ? "Switch to Light" : "Switch to Dark" } </button> </div> </div> </> ); } |
CSS
/* 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 , 1 fr)); 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 { h 2 { font-size : 2 rem; color : var(--text-color); } p { font-size : 1 rem; 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:
Contact Us