Skip to content

🎉 Material UI v5 is out now! Check out the announcement blog post →

Portal API

The API documentation of the Portal React component. Learn more about the props and the CSS customization points.

Import

import Portal from '@material-ui/core/Portal';
// or
import { Portal } from '@material-ui/core';

You can learn more about the difference by reading this guide.

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

Props

Name Type Default Description
children node The children to render into the container.
container HTML element
| React.Component
| func
A HTML element, component instance, or function that returns either. 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.
disablePortal bool false Disable the portal behavior. The children stay within it's parent DOM hierarchy.
onRendered func Deprecated. Use the ref instead.

Callback fired once the children has been mounted into the container.
This prop will be removed in v5, the ref can be used instead.

The component cannot hold a ref.

Demos