Implementé un componente Popper usando popper.js, y usé React's Portal para renderizar el elemento popper.

Y ahora quiero obtener una vista previa de mi componente popper, pero falla al crear un portal en storybook.js

Aquí está mi enfoque.

.storybook/preview.js

 import { ThemeProvider } from 'emotion-theming'; import { Global } from '@emotion/react'; import { theme, normalize } from 'custom-theme'; export const parameters = { actions: { argTypesRegex: '^on[AZ].*' }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/, }, }, }; export const decorators = [ Story => ( <> <ThemeProvider theme={theme}> <Global styles={normalize} /> {Story()} <div id="popper-root"></div> </ThemeProvider> </> ), ];

Portal.tsx

 import { ReactNode, useMemo } from 'react'; import { createPortal } from 'react-dom'; interface IPortal { children: ReactNode; portalId: string; } const Portal = ({ children, portalId }: IPortal) => { const portalElement = useMemo<HTMLElement | null>( () => document.getElementById(portalId), [portalId], ); if (!portalElement) { throw new Error(`Undefined Portal Id : ${portalId}`); } return createPortal(children, portalElement); }; export default Portal;

Captura de mensaje de error

¿Hay alguna forma de mostrar el componente usando el portal de reacción en el libro de cuentos? Si no, ¿hay otra forma de obtener una vista previa que no sea probarlo en el proyecto de reacción?