toastify notification이 스크린 밖에서 뜰때

notification

예쁜 알림이 필요해서 toastify를 설치했는데,

컨텐츠가 길 경우 알림창이 화면 밖에서 떠서 며칠 삽질했었다.

    <React.Fragment>
      <BrowserRouter>
        <Header /> // <-- ToastContainer Good
            <Content /> //<--- ToastContainer NG
            <Footer />
      </BrowserRouter>
    </React.Fragment>

 

<Content/> 위치에 넣은 ToastContainer를

<Header/>에 옴기니 예상하던 방식으로 잘 동작한다.

 

정확히는 Header => Appbar에 넣어놨다.

 

까먹지 말자.