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.

DemosComponents API

Portal API

Import

import { Portal } from '@mui/base/Portal';
// or
import { Portal } from '@mui/base';
Learn about the difference by reading this guide on minimizing bundle size.

Props

NameTypeDefaultDescription
childrennode

The children to render into the container.

containerHTML element
| func

An HTML element or function that returns one. The container will have the portal children appended to it.
By default, it uses the body of the top-level document object, so it's simply document.body most of the time.

disablePortalboolfalse

The children will be under the DOM hierarchy of the parent component.


The component cannot hold a ref.