Creé una aplicación de reacción usando create-react-app . Mi estructura de archivos es como la siguiente:
Index.js App.css App.js -- MyComponent1.js -- MyComponent2.js Para navegar entre los dos componentes, estoy usando react-router-dom en App.js así:
<BrowserRouter> <Route path='/MyComponent1' exact component={MyComponent1} /> <Route path='/MyComponent2' exact component={MyComponent2} /> </BrowserRouter> Entonces, ambos componentes usan el mismo estilo App.css importado en App.js
Quiero aplicar un overflow:hidden al cuerpo cuando solo estoy en Component1 y eliminar esta nueva clase en otros componentes, ¿cómo hacerlo?
¡Encontré la solución!
Todo lo que tenía que hacer era usar document.body directamente en el componente para configurar los estilos directamente usando Hook.
Por lo tanto, overflow:visible se aplicará en el montaje del componente y overflow:hidden en el desmontaje del componente de la siguiente manera:
useEffect(() => { // Applying on mount document.body.style.overflow = "hidden"; // Applying on unmount return () => { document.body.style.overflow = "visible"; } }, [])