Portal

The portal component renders its children into a new "subtree" outside of current DOM hierarchy.

📦 1.3 kB gzipped

Дочерние элементы портала будут добавлены внутрь элемента, указанного в свойстве container. Портал используется внутри компонентов Modal и Popper.

Пример

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

Server-side

React doesn't support the createPortal() API on the server. You have to wait for the client-side hydration to see the children.

API

<Portal />