portal

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

Name	Type	Default	Description
children	node	-	The children to render into the container.
container	HTML 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.
disablePortal	bool	false	The children will be under the DOM hierarchy of the parent component.

Note: 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.