Блог

Я создал приложение react с помощью create-react-app . Моя файловая структура выглядит следующим образом :

 Index.js
App.css
App.js
-- MyComponent1.js
-- MyComponent2.js
 

Чтобы перемещаться между двумя компонентами, которые я использую react-router-dom , App.js вот так :

 <BrowserRouter>
        <Route path='/MyComponent1' exact component={MyComponent1} />
        <Route path='/MyComponent2' exact component={MyComponent2} />
</BrowserRouter>
 

Таким образом, оба компонента используют один и тот же App.css стиль, импортированный в App.js

Я хочу применить an overflow:hidden к телу, когда я только включен Component1 , и удалить этот новый класс на других компонентах, как это сделать ?

Нашел решение!

Все, что мне нужно было сделать, это использовать document.body непосредственно компонент для установки стилей непосредственно с помощью Hook.

Так overflow:visible будет применено при монтаже компонента и overflow:hidden при демонтаже компонента, как показано ниже :

       useEffect(() => {
// Applying on mount
        document.body.style.overflow = "hidden";
// Applying on unmount    
        return () => {
          document.body.style.overflow = "visible";
        }
      }, [])