Portal

The portal component renders its children into a new "subtree" outside of current DOM hierarchy.

The children of the portal component will be appended to the container specified. The component is used internally by the Modal and Popper components.

Example

It looks like I will render here.

<button type="button" onClick={handleClick}>
  {show ? 'Unmount children' : 'Mount children'}
</button>
<Box sx={{ p: 1, my: 1, border: '1px solid' }}>
  It looks like I will render here.
  {show ? (
    <Portal container={container.current}>
      <span>But I actually render here!</span>
    </Portal>
  ) : null}
</Box>
<Box sx={{ p: 1, my: 1, border: '1px solid' }} ref={container} />
<button type="button" onClick={handleClick}>
  {show ? 'Unmount children' : 'Mount children'}
</button>
<Box sx={{ p: 1, my: 1, border: '1px solid' }}>
  It looks like I will render here.
  {show ? (
    <Portal container={container.current}>
      <span>But I actually render here!</span>
    </Portal>
  ) : null}
</Box>
<Box sx={{ p: 1, my: 1, border: '1px solid' }} ref={container} />

Press Enter to start editing

Server-side

React doesn't support the createPortal() API on the server. You have to wait for the client-side hydration to see the children.

Unstyled

📦 970 B gzipped

As the component does not have any styles, it also comes with the Base package.

import Portal from '@mui/base/Portal';

API

<Portal />