#Global-error styles

1 messages · Page 1 of 1 (latest)

tawny solar
#

How I can add styles on global-error? My component don't load styles, when I have network problem

nocturne dawnBOT
#

Hi @tawny solar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To add styles to your global-error component in Next.js, you need to be aware of a few important points:

  1. Global Styles vs. CSS Modules: Styles imported in global-error.* from CSS modules will not apply unless they are also imported in layout.* and somehow used there too. This is because Next.js doesn’t download the styles imported in global-error.* to the client even though it uses the class names on the elements. A clean way to circumvent this is to use global styles instead of importing a module.

  2. Using Global Styles: If you have a global styles file, you can create unique class names in this file with a globally unique prefix and then use them in global-error.tsx.

  3. Hack for CSS Modules: If you really need to import CSS modules, you can use a hack to force the styles to load.

Here are the steps to add styles to your global-error component:

Using Global Styles

  1. Create a global styles file (if you don't already have one) in your app directory, e.g., globals.scss.

  2. Import the global styles in your layout.tsx:

    import './globals.scss';

  3. Define unique class names in the global styles file:

    // globals.scss
.ErrorPage__container {
  background-color: #f8d7da;
  color: #721c24;
  padding: 20px;
  border: 1px solid #f5c6cb;
}

  4. Use these class names in your global-error.tsx:

    'use client';

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <html>
      <body className="ErrorPage__container">
        <h2>Something went wrong!</h2>
        <button onClick={() => reset()}>Try again</button>
      </body>
    </html>
  )
}
#

Using CSS Modules (Hack)

  1. Create a CSS module file (e.g., error.module.scss):

    // error.module.scss
.errorContainer {
  background-color: #f8d7da;
  color: #721c24;
  padding: 20px;
  border: 1px solid #f5c6cb;
}

// A dummy element to force load the styles in layout.tsx
.dummy {
  display: none;
}

  2. Import the CSS module in your global-error.tsx:

    import Styles from '@/styles/error.module.scss';

  3. Import the CSS module in your layout.tsx and use the dummy class:

    import ErrorStyles from '@/styles/error.module.scss';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <div className={ErrorStyles.dummy} />
      </body>
    </html>
  );
}

  4. Use the styles in your global-error.tsx:

    'use client';

import Styles from '@/styles/error.module.scss';

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: