How to get the value of variable to change the css of body/root element in reactJS?-CodePudding

I am passing a variable name theme with the help of useContext to every component in the react. I want to change the bgColor of body or root element as my theme changes as per the following cases. Simply if

theme === light : bgColor => white
theme === dark : bgColor => #2d2d2d
theme === intense-dark : bgColor => black

How can access the CSS properties of root/body element in any of the React Component or vice-versa ( how can I access the value of variable theme in the `App.css )? Any of both ways is fine for me.

I am changing the theme as follows in one of my React component?

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;

CodePudding user response：

although I solved the question in the following way:

I made a div container wrapping the App.js and defined the context in the index.js as follows:

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

So you don't need to supply value as App.js represents the whole body of your page.

For reference, I am also sharing 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;

CodePudding user response：

Create a class in CSS file which contains the changed state css, after that create a state that regulates the event in which you want you css to change. Let's say on click triggers css change, in that case provide a state to check the click, it may be a toggle state as well, and once the event is triggered, show the specific css class in the parent tag using .