I created a react app using create-react-app. My file structure is like the following :
Index.js
App.css
App.js
-- MyComponent1.js
-- MyComponent2.js
To navigate between the two components I'm using react-router-dom in App.js like this :
<BrowserRouter>
<Route path='/MyComponent1' exact component={MyComponent1} />
<Route path='/MyComponent2' exact component={MyComponent2} />
</BrowserRouter>
So both components are using the same App.css style imported in App.js
I want to apply an overflow:hidden to the body when I'm only on Component1 and remove this new class on other components, how to do so ?
Found the solution!
All I had to do was using document.body directly on the component to set the styles directly using Hook.
So overflow:visible will be applied on the component mounting, and overflow:hidden on the component unmounting like the following :
useEffect(() => {
// Applying on mount
document.body.style.overflow = "hidden";
// Applying on unmount
return () => {
document.body.style.overflow = "visible";
}
}, [])