fix(next): try injecting styles via a component registry

Author: hackr-sh

package.json

@@ -49,6 +49,7 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
+    "next": "^13.4.2",
     "styled-components": "6.0.0-rc.1"
   },
   "config": {

src/components/next.tsx

@@ -0,0 +1,29 @@
+'use client';
+ 
+import React, { useState } from 'react';
+import { useServerInsertedHTML } from 'next/navigation';
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
+ 
+export const DotsUIComponentRegistry = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = 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>
+  );
+}

src/index.ts

@@ -4,4 +4,5 @@ export { Button, type ButtonProps } from './components/Button';
 export { Background } from './components/Background';
 export { TextField, type TextFieldProps } from './components/TextField';
 export { Text, type TextProps } from './components/Text';
-export { ThemeProvider } from './components/ThemeProvider';
+export { ThemeProvider } from './components/ThemeProvider';
+export { DotsUIComponentRegistry } from './components/next';