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

• Portal