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. The component is used internally by the Modal and Popper components.

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} />

<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} />

Press Enter to start editing

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.

Unstyled

📦 970 B gzipped

As the component does not have any styles, it also comes with the Base package.

import Portal from '@mui/base/Portal';

API

<Portal />