Next.js navigating between two different layouts doesn't unload imported styles

Question

With my Next.js 14 app (using app router), I am having public accessible area, where I use Tailwind for styling, and then admin area, where I want to use Mantine component library. However, while using the Next router, navigating from admin area to client area, the imported Mantine style still persists on the page, even tho it is not being imported in the client area layout.tsx file. I understand that it is imported as a global CSS file, therefore this behavior is expected, however, is there any way to mitigate this?

RootStyleRegistry and the basic Next.js Mantine setup is taken from https://mantine.dev/styles/emotion/#usage-with-nextjs-app-router

admin/layout.tsx

import "@mantine/core/styles.css";
...

const AdminLayout: React.FC<AdminLayoutProps> = ({ children }) => {
  return (
    <RootStyleRegistry>
      <MantineEmotionProvider>
        <MantineProvider stylesTransform={emotionTransform}>
          <AdminWrapper>{children}</AdminWrapper>
        </MantineProvider>
      </MantineEmotionProvider>
    </RootStyleRegistry>
  );
};

(public)/layout.tsx

import "./globals.css";
...

const PublicLayout: FC<PublicLayoutProps> = ({ children }) => {
  return (
    <>
      <Navbar />
      <main className="flex flex-grow">{children}</main>
      <Footer />
    </>
  );
};

I tried importing the styles client-side by using dynamic(() => import('@mantine/core/styles.css'), { ssr: false });, but that did absolutely nothing. I do not have any other ideas how to fix this, except for performing a full page reload when switching between these two interfaces.

sori · Accepted Answer · 2025-04-02 09:48:53Z

1

I don't know if this is still relevant for you. But maybe for others.

There was an issue reported on github about this: https://github.com/vercel/next.js/issues/58597

They say its intentional but I don't know. Kinda weird in my opinion too...

Anyway, hope this helps :)

edited Apr 2 at 9:48

sori

5402 gold badges5 silver badges17 bronze badges

answered Mar 28 at 11:59

DaanDeReus

691 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Next.js navigating between two different layouts doesn't unload imported styles

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related