Portal

El componente portal renderiza sus hijos en un nuevo "subárbol" fuera de la jerarquía actual de DOM.

📦 1.3 kB comprimido

Los hijos del componente portal se añadirán al container especificado. El componente es utilizado internamente por los componentes Modal y Popper.

La función de estilo de la paleta.

Ejemplo

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

Lado del servidor

React doesn't support the createPortal() API on the server. Hay que esperar a que la hidratación del lado del cliente vea a los children.

API

<Portal />