如何获取变量的值以更改 reactJS 中 body/root 元素的 css？答案

【问题标题】：How to get the value of variable to change the css of body/root element in reactJS?如何获取变量的值以更改 reactJS 中 body/root 元素的 css？
【发布时间】：2021-11-26 22:30:19
【问题描述】：

我在 useContext 的帮助下将变量名称 theme 传递给反应中的每个组件。我想根据以下情况更改 body or root element 的 bgColor，因为我的主题会发生变化。只是如果

主题 === 灯光：bgColor => 白色
主题 === 深色：bgColor => #2d2d2d
主题 === 深暗：bgColor => 黑色

如何在任何 React 组件中访问 root/body 元素的 CSS 属性，反之亦然（如何访问 `App.css 中变量 theme 的值）？两种方法中的任何一种都适合我。

我在我的一个 React 组件中更改主题如下？

import { useContext } from "react";
import Notes from "./Notes";
import themeContext from "../context/themes/themeContext";

const Home = (props) => {
const contextForThemes = useContext(themeContext);
const { theme } = contextForThemes;
let noteStyle = {
  backgroundColor: "white",
  color: "black",
};

if (theme.light) {
  noteStyle = { backgroundColor: "white", color: "black" };
} else if (theme.dark) {
  noteStyle = {
    backgroundColor: "#2d2d2d",
    color: "whitesmoke",
  };
  } else if (theme.anotherDark) {
    noteStyle = {
    backgroundColor: "black",
    color: "#84ff00",
  };
}

return (
  <div style={noteStyle}>
    <Notes showAlert={props.showAlert} />
  </div>
 );
};

export default Home;

【问题讨论】：

标签： javascript html css reactjs react-hooks

【解决方案1】：

虽然我通过以下方式解决了这个问题：

我制作了一个 div 容器来包装 App.js 并在 index.js 中定义上下文如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import ThemeState from './context/themes/ThemeState';


ReactDOM.render(
  <React.StrictMode>
    <ThemeState>
     <App />
    </ThemeState>
  </React.StrictMode>,
  document.getElementById('root')
);

所以您不需要提供值，因为 App.js 代表了整个页面。

供参考，我也分享App.js

import "./App.css";
import { useState,useContext } from "react";
import Home from "./components/Home";
import About from "./components/About";
import Navbar from "./components/Navbar";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import NoteState from "./context/notes/NoteState";
import themeContext from "./context/themes/themeContext";

function App() {

  const contextForThemes = useContext(themeContext);
  const { theme } = contextForThemes;




  let bgColor = 'white';
  if(theme.light) {
    bgColor ='white';
  } 
  else if(theme.dark) {
    bgColor = '#2d2d2d';
  }
  else if(theme.anotherDark) {
    bgColor = 'black';
  }



 return (
   <>
     <NoteState>
      <div style={{backgroundColor:bgColor, paddingBottom:'150px'}}>
      <Router>
        <Navbar showAlert={showAlert}/>
        <div className="container">
          <Switch>
             <Route exact path="/">
              <Home showAlert={showAlert} />
             </Route>
            <Route exact path="/about">
              <About  />
            </Route>
          </Switch>
        </div>
      </Router>
      </div>
   </NoteState>
  </>
 );
}


export default App;

【讨论】：

【解决方案2】：

在 CSS 文件中创建一个包含已更改状态 css 的类，然后创建一个状态来调节您希望 css 更改的事件。假设点击触发css更改，在这种情况下提供一个状态来检查点击，它也可能是一个切换状态，一旦触发事件，使用在父标签中显示特定的css类。

【讨论】：