Estoy tratando de hacer un SPA con reacción y usando un componente con estilo para cambiar el estilo y el tema. El problema que tengo cuando agrego clases por Javascript y luego trato de cambiar el tema, se eliminan todas las clases agregadas por JavaScript.
¿Alguien puede decirme cuál es la razón de esto y cómo puedo resolver este problema?
Aquí está el ejemplo , donde verá que cuando se desplaza hacia abajo, agrego la clase al encabezado con la ayuda de JavaScript para dar el borde inferior, pero cuando alterno el tema con el botón, se elimina la clase agregada.
const themeToggler = () => { theme === "light" ? setTheme("dark") : setTheme("light"); }; const StyleHeader = styled.header ` background: ${(props) => props.theme.body}; `; function scrollPos(maxScrollPos) { let scrollPos = document.documentElement.scrollTop; if (scrollPos >= maxScrollPos) { addClassToElement("glow-shadow", ".header"); } else { removeClassFromElement("glow-shadow", ".header"); } } <ThemeProvider theme={theme==="light" ? light : dark}> <GlobalStyles /> <StyleHeader className={`header pt-3 pb-3 fixed-top`}> <button onClick={themeToggler}>Toggle</button> </StyleHeader> <div className="content"> scrool down to see border on header then click the toggle button to change the theme and border class will be removed <h1>h1</h1> </div> <h1 className="content">h1</h1> <h1 className="content">h1</h1> <h1 className="content">h1</h1> </ThemeProvider>Debe ejecutar su función scrollPos después del cambio de tema. Aparentemente, el conmutador de temas elimina todas las clases excepto las originales en el elemento, por lo que debe reemplazarlas. Algo como esto, donde observamos los cambios en la propiedad del theme :
import React, { useEffect } from "react"; export default function App() { ... useEffect(() => { scrollPos(100); }, [theme, scrollPos]); ... };Acepté la respuesta de @isherwood pero encontré otra forma, así que me gustaría compartirla.
import React, { useState} from "react"; export default function App() { ... const [isScrolled, setIsScrolled] = useState(false); function scrollPos(maxScrollPos) { let scrollPos = document.documentElement.scrollTop; if (scrollPos >= maxScrollPos) { setIsScrolled(true); } else { setIsScrolled(false); } } window.addEventListener("scroll", (event) => { scrollPos(100); }); return ( <ThemeProvider theme={theme==="light" ? light : dark}> <GlobalStyles /> <StyleHeader className={`nq-header pt-3 pb-3 fixed-top ${ isScrolled ? "glow-shadow" : "" }`}> <button onClick={themeToggler}>Toggle</button> </StyleHeader> <div className="content"> scrool down to see border on header then click the toggle button to change the theme and border class will be removed <h1>h1</h1> </div> <h1 className="content">h1</h1> <h1 className="content">h1</h1> <h1 className="content">h1</h1> </ThemeProvider> )};