Skip to content
+

Portal

The Portal component lets you render its children into a DOM node that exists outside of the Portal's own DOM hierarchy.

Introduction

Portal is a utility component built around React's createPortal() API. It gives you the functionality of createPortal() in a convenient component form.

The Portal component is used internally by the Modal and Popper components.

Component

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

Normally, children of a component are rendered within that component's DOM tree. But sometimes it's necessary to mount a child at a different location in the DOM.

The Portal component accepts a container prop that passes a ref to the DOM node where its children will be mounted.

The following demo shows how a <span> nested within a Portal can be appended to a node outside of the Portal's DOM hierarchy—click Mount children to see how it behaves:

It looks like I will render here.
Press Enter to start editing

Server-side

The DOM API isn't available on the server, so you need to use the container prop callback. This callback is called during a React layout effect:

<Portal container={() => document.getElementById('filter-panel')!}>
  <Child />
</Portal>