Estoy tratando de hacer un botón que permita al usuario cambiar entre el tema claro y oscuro. El método que estoy usando es cambiar el nombre de clase de mi App div. Todos los demás componentes de mi proyecto están dentro del componente de la aplicación. Luego, en los archivos CSS individuales para los componentes, primero selecciono el nombre de clase del div de la aplicación, que es .light u .dark. Luego escribo el nombre del componente al que quiero establecer un color de tema. Por ejemplo:

 .light p { background-color: white; }

Sin embargo, esto no funciona.

Estos son algunos de los archivos:

 /*App.js*/ import { useState } from "react"; import TaskPage from "./pages/taskPage"; import { fas } from "@fortawesome/free-solid-svg-icons"; import { library } from "@fortawesome/fontawesome-svg-core"; import { MainContextProvider } from "./store/MainContext"; library.add(fas); function App() { const [theme, setTheme] = useState("light"); const switchTheme = () => { setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light")); }; return ( <MainContextProvider> <div className={`App ${theme}`}> <div className="pageTop"> <h1 className="title">Task Board</h1> </div> <button className="button" onClick={switchTheme}> Change theme </button> <TaskPage /> </div> </MainContextProvider> ); } export default App;

 /*index.css*/ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"); .App { overflow-x: hidden; padding-bottom: 40px; height: 100%; width: 100%; } .light { background-color: #fcfcfc; } .dark { background-color: #181A1B; } .title { font-family: "Roboto", sans-serif; font-size: 50px; font-weight: 700; text-align: center; margin-top: 40px; text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2); } .light .title { color: black; } .dark .title { color: white; } .pageTop { margin-bottom: 50px; }

 /*todo.module.css*/ .taskCard { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; width: 340px; height: 260px; min-width: 340px; min-height: 260px; display: flex; flex-wrap: wrap; flex-direction: column; border-radius: 12px; padding: 14px; box-sizing: border-box; } .light .taskCard { background-color: white; } .dark .taskCard { background-color: #2B2E30; }

Usé este sandbox como ejemplo: https://codesandbox.io/s/stupefied-jackson-0ynz6?file=/src/App.js

Soy un principiante con React.js