Material-ui: [Diálogo] Efeitos colaterais (propriedade oculta de estouro de corpo)

Criado em 20 jun. 2015 · 3Comentários · Fonte: mui-org/material-ui

Eu gostaria de sugerir uma mudança a seguir,

O componente Dialog define o estilo <body> como overflow: hidden; . E ao dispensar, esta regra de estilo é dispensada.

Mas se o componente for removido do DOM enquanto o Dialog estava sendo mostrado, ele torna o corpo inteiro não rolável devido ao estilo acima.

Eu sugeriria componentWillUnmount seguinte forma,

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

ou para ser mais independente, a função de ciclo de vida componentDidMount pode armazenar o estado original do estilo do corpo e, ao desmontar, esse estilo pode ser restaurado.

bug 🐛

Fonte

activatedgeek

👍5

Comentários muito úteis

Não funciona bem com a propriedade CSS overflow-y: overlay; :
ezgif com-video-to-gif

goodwin64 em 23 set. 2019

👍3

Todos 3 comentários

1 Estou tendo esse problema agora porque estou gerenciando a mim mesmo se o diálogo está no dom ou não.

O problema está dentro do componente Overlay . A propriedade overflow só é atualizada em componentDidUpdate . Mas quando é removida, a propriedade nunca é redefinida: /