Open mmspring13 opened 2 months ago
code like:
'use client' import React, { useState } from 'react' import { useServerInsertedHTML } from 'next/navigation' import rtlPlugin from "stylis-plugin-rtl"; import { ServerStyleSheet, StyleSheetManager } from 'styled-components'; export default function StyledComponentsRegistry({ children, }: { children: React.ReactNode }) { const [styledComponentsStyleSheet, seet] = useState(() => { return new ServerStyleSheet(); }); useServerInsertedHTML(() => { const styles = styledComponentsStyleSheet.getStyleElement() styledComponentsStyleSheet.instance.clearTag() return styles }); if (typeof window !== 'undefined') return children; return ( <StyleSheetManager sheet={styledComponentsStyleSheet.instance} stylisPlugins={[rtlPlugin]} > {children} </StyleSheetManager> ) }
yarn build && yarn start or example bug git-repo
yarn build && yarn start
same styles in server and client
different styles in server and client
problem similar to emotion-2928
Environment
System:
Binaries:
npmPackages:
Reproduction
code like:
Steps to reproduce
yarn build && yarn start
or example bug git-repoExpected Behavior
same styles in server and client
Actual Behavior
different styles in server and client
problem similar to emotion-2928