CmPortal
Renderiza overlays customizados fora da árvore visual atual, direto no document.body.
Import
Caminho público recomendado para este componente.
import { useState } from "react";
import { CmBadge, CmButton, CmCard, CmPortalPanel, CmRow, CmStack, CmText } from "cosmemilton-ui";CmPortal é um utilitário de baixo nível: ele mantém o conteúdo no seu componente React, mas renderiza o HTML final em document.body.
Use quando um overlay, aviso, menu customizado ou painel flutuante precisa escapar de overflow, z-index ou stacking context do container onde foi declarado.
CmPortalPanel cria uma superfície fixa pronta para avisos e painéis simples, sem escrever position/z-index no consumidor.
No Next/SSR, o portal retorna null até montar no cliente; isso evita acessar document.body durante a renderização no servidor.
Overlay fora do container
Clique no botão: o card é declarado dentro da área da página, mas aparece fixo no viewport porque o CmPortal o envia para document.body.
Área da página
O card do portal é declarado aqui, mas aparece fixo no viewport.