Así que estoy usando Estado para cambiar el color de fondo de mi cuerpo usando clases. Básicamente, hay un efecto de desplazamiento en el que comienza en "modo oscuro" y se convierte en "modo claro" después de presionar una referencia específica. Aquí está mi fragmento de código:

 const shiftRef = useRef(null) const [ changeMode, setChangeMode ] = useState("dark-mode"); const handleChangeMode = () => { if (shiftRef.current) { let main = shiftRef.current.getBoundingClientRect(); if (main.top <= 160) { setChangeMode("light-mode") } else { setChangeMode("dark-mode") } console.log(main.top) } } useEffect(() => { document.body.classList = changeMode; window.addEventListener("scroll", handleChangeMode); return () => window.removeEventListener("scroll", handleChangeMode); }, [changeMode]);

Ahora lo tengo cambiando el cuerpo en lugar del contenedor de componentes para que el color siempre esté en el fondo; si no hiciera eso, el color se "recortaría" si me desplazara más allá de los parámetros de la página, lo que no daría el efecto que necesito.

Esta es mi pregunta... ¿es válido declarar la clase de mi cuerpo en el gancho Effect con document.body.classList = {add class here} ? La única razón por la que pregunto es que normalmente tiene una acción adicional como .add o .remove o .contains o algo así, pero no lo haré aquí. Además: debo señalar que todo se compiló con éxito y que no hay advertencias/alertas en mi consola... ¿así que supongo que está bien? Pero pensé en preguntarle a la gente aquí, ya que todos ustedes brindan mucha información excelente.

¡Gracias!