Skip to contentSkip to content

Portal API

API reference docs for the React Portal component. Learn about the props, CSS, and other APIs of this exported module.

Demos

Import

import Portal from '@mui/material/Portal';
// or
import { Portal } from '@mui/material';

Learn about the difference by reading this guide on minimizing bundle size.



Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

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.
You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.
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.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.