Something went wrong. Try again.
exercise for Josh W. Comeau's Joy of React course
Something went wrong. Try again.
943 B · 32 lines
JavaScript
123456789101112131415161718192021222324252627282930313233'use client';// This is required so that the CSS is extracted and injected on// the server, to avoid a Flash of Unstyled Content.//// More info:// https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
import React from 'react';import { useServerInsertedHTML } from 'next/navigation';import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
export default function StyledComponentsRegistry({ children }) { const [styledComponentsStyleSheet] = React.useState( () => new ServerStyleSheet(), );
useServerInsertedHTML(() => { const styles = styledComponentsStyleSheet.getStyleElement(); styledComponentsStyleSheet.instance.clearTag(); return <>{styles}</>; });
if (typeof window !== 'undefined') { return <>{children}</>; }
return ( <StyleSheetManager sheet={styledComponentsStyleSheet.instance}> {children} </StyleSheetManager> );}