如何使用 ReactJS 动态更新 SCSS 变量？

我们可以借助ReactJS在项目的帮助下动态更新SCSS变量，实现卡片组件的明暗主题切换。

先决条件：

• npm & create-react-app 命令的基础知识。
• HTML/CSS 基础知识。
• React 组件和 ES6 的基础知识。

基本设置：您将使用create-react-app启动一个新项目，因此打开终端并输入：

npx create-react-app react-scss

现在通过在终端中输入给定的命令转到您的react-scss文件夹：

cd react-scss

所需模块：通过在终端中键入给定命令来安装此项目所需的依赖项。

$ npm install node-sass

对于使用纱线的开发人员：

$ yarn add node-sass

项目结构：项目中的文件结构将如下所示。

文件夹结构

方法：

1. 我们将使用 JSX 创建一个卡片组件并使用 SCSS 对其进行样式设置。
2. 在对卡片组件进行结构化和样式化之后，我们将使用 react useState hook 来根据用户管理“darkTheme”的状态。
3. 将有一个带有onClick事件侦听器的按钮，如果“darkTheme”的状态以前为真，则它将设置为假，反之亦然。
4. 我们将使用useEffect反应钩子，每当“darkTheme”的状态发生变化时，它就会启动。
5. 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 (
    <>
      

        
        

          
Dynamically changing scss variable using react 
  
          

            {" "}
            According to Wikipedia sass is a preprocessor 
            scripting language that is interpreted or compiled 
            into Cascading Style Sheets (CSS).
          
  
           setDarkTheme(!darkTheme)}>
            {darkTheme ? "????" : "????"}
          
        
      
    
  );
}

应用程序.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/ ，您将看到以下输出：