Disable styling after reload (nextjs 14.0.3)

[Denis-Jurkovsek]

Hey, i have a new issue with the package, the design removes after i reload the page, here are some screenshots:

Default design:

After reload on the page:

Maybe somebody have the same issue as i?

[fortezhuo]

@Denis-Jurkovsek

I have same issue, and solved it with add _document.tsx

import Document, { DocumentContext } from "next/document"
import { SheetsRegistry, JssProvider, createGenerateId } from "react-jss"

export default class JssDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const registry = new SheetsRegistry()
    const generateId = createGenerateId()
    const originalRenderPage = ctx.renderPage
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) =>
          (
            <JssProvider registry={registry} generateId={generateId}>
              <App {...props} />
            </JssProvider>
          ),
      })

    const initialProps = await Document.getInitialProps(ctx)

    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          <style id="server-side-styles">{registry.toString()}</style>
        </>
      ),
    }
  }
}

https://github.com/vercel/next.js/blob/canary/examples/with-react-jss/pages/_document.tsx

[bohdan-sharkz]

had the same. Using dynamic export helped. https://www.npmjs.com/package/react-form-stepper#using-with-ssr