Material-ui: [대화] 부작용 (본체 오버플로 숨김 속성)

에 만든 2015년 06월 20일 · 3코멘트 · 출처: mui-org/material-ui

다음과 같은 변경을 제안하고 싶습니다.

Dialog 구성 요소는 <body> 스타일을 overflow: hidden; 합니다. 그리고 취소하면이 스타일 규칙이 취소됩니다.

그러나 Dialog가 표시되는 동안 구성 요소가 DOM에서 제거되면 위의 스타일로 인해 전체 본문을 스크롤 할 수 없게됩니다.

다음과 같이 componentWillUnmount 를 제안하겠습니다.

  componentWillUnmount: function() {
    // dialog has a side-effect if this not checked
    document.body.style.overflow = 'auto';
  }

또는 더 독립적이려면 componentDidMount 라이프 사이클 함수가 바디 스타일의 원래 상태를 저장할 수 있으며 마운트 해제시 해당 스타일을 복원 할 수 있습니다.

bug 🐛

출처

activatedgeek

👍5

가장 유용한 댓글

overflow-y: overlay; CSS 속성에서 잘 작동하지 않습니다.
ezgif com-video-to-gif

goodwin64 에 2019년 09월 23일

👍3

+1 Dialog가 dom에 있는지 여부를 직접 관리하고 있기 때문에 지금이 문제가 발생합니다.

문제는 Overlay 구성 요소 내부에 있습니다. overflow 속성은 componentDidUpdate 에서만 업데이트됩니다. 그러나 제거되면 속성이 재설정되지 않습니다.

tleunen 에 2015년 07월 02일

Thr1ve 에 2015년 07월 05일

overflow-y: overlay; CSS 속성에서 잘 작동하지 않습니다.
ezgif com-video-to-gif

goodwin64 에 2019년 09월 23일

👍3

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급