Portal

O componente portal renderiza seus elementos filho em uma nova "subárvore" fora da hierarquia do DOM atual.

O filho do componente portal será adicionado ao container especificado. O componente é usado internamente pelos componentes Modal e Popper.

A paleta com funções de estilo.

Exemplo

It looks like I will render here.

<button type="button" onClick={handleClick}>
  {show ? 'Unmount children' : 'Mount children'}
</button>
<Box sx={{ p: 1, my: 1, border: '1px solid' }}>
  It looks like I will render here.
  {show ? (
    <Portal container={container.current}>
      <span>But I actually render here!</span>
    </Portal>
  ) : null}
</Box>
<Box sx={{ p: 1, my: 1, border: '1px solid' }} ref={container} />

Do lado do servidor

React não suporta a API createPortal() no servidor. Você deve esperar pelo lado do cliente fazer a hidratação para ver o filho.

API

<Portal />