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.