Как динамически обновлять переменные SCSS с помощью ReactJS?

Опубликовано: 8 Августа, 2022

Мы можем динамически обновлять переменные SCSS с помощью ReactJS с помощью проекта, добившись переключения темы компонента карты между светлой и темной темой.

Условие:

Базовые знания npm и команды create-react-app.
Базовые знания HTML/CSS.
Базовые знания реактивных компонентов и ES6.

Базовая настройка: вы начнете новый проект, используя приложение create-react-app, поэтому откройте свой терминал и введите:

npx create-react-app react-scss

Теперь перейдите в папку react-scss , введя данную команду в терминале:

cd react-scss

Требуемый модуль: Установите зависимости, необходимые в этом проекте, введя данную команду в терминале.

$ npm install node-sass

Для разработчиков, использующих пряжу:

$ yarn add node-sass

Структура проекта: файловая структура проекта будет выглядеть следующим образом.

Подход:

Мы собираемся создать компонент карты с помощью JSX и стилизовать его с помощью SCSS.
После структурирования и стилизации компонента карты мы собираемся использовать хук react useState для управления состоянием «darkTheme» в соответствии с пользователем.
Будет кнопка с прослушивателем событий onClick , которая установит состояние «darkTheme» как ложное, если оно ранее было истинным, и наоборот.
Мы собираемся использовать хук реакции useEffect , который будет срабатывать каждый раз, когда происходит изменение состояния «darkTheme».
useEffect вызовет побочный эффект и изменит значение переменных SCSS: $background-color и $text-color.

Пример:

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);
    }
  }
}

Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:

npm start

Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:

Technical Scripter Picked

Как динамически обновлять переменные SCSS с помощью ReactJS?

App.js

App.scss

РЕКОМЕНДУЕМЫЕ СТАТЬИ