Portal
Renders a component outside the current DOM hierarchy.
Import#
import { Portal } from '@chakra-ui/react'
Usage#
Portal is used to transport any component or element to the end of
document.body and renders a React tree into it.
Useful for rendering a natural React element hierarchy with a different DOM hierarchy to prevent parent styles from clipping or hiding content (for popovers, dropdowns, and modals). It supports nested portals
Using a custom container#
You can render the contents within a portal to a different DOM node, instead of
the default document.body. Pass the containerRef prop and set its value to
the ref of the container you'd like to use.