Next.js 14（App Router）切换布局时Mantine样式残留问题求助

我正在开发使用App Router的Next.js 14应用，公共访问区域采用Tailwind做样式，管理后台区域则使用Mantine组件库。但使用Next路由从管理后台导航到公共区域时，已导入的Mantine样式仍会保留在页面上，尽管公共区域的layout.tsx中并未导入该样式。我明白这是全局CSS文件的特性，但有没有办法缓解这个问题？

相关代码 #

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 />
    </>
  );
};

我尝试过通过dynamic(() => import('@mantine/core/styles.css'), { ssr: false });在客户端导入样式，但完全无效。目前我除了在切换两个界面时执行整页刷新外，没有其他解决思路。

1. 手动清除Mantine全局样式 #

在公共区域的layout组件中监听路由变化，进入公共区域时移除页面中Mantine相关的样式标签。修改(public)/layout.tsx：

"use client";
import { useEffect } from "react";
import { usePathname } from "next/navigation";
import "./globals.css";
...

const PublicLayout: FC<PublicLayoutProps> = ({ children }) => {
  const pathname = usePathname();

  useEffect(() => {
    // 移除Mantine全局样式标签和Emotion注入的样式
    const mantineStyleElements = document.querySelectorAll(
      'link[href*="mantine/core/styles.css"], style[data-emotion]'
    );
    mantineStyleElements.forEach(el => el.remove());
  }, [pathname]);

  return (
    <>
      <Navbar />
      <main className="flex flex-grow">{children}</main>
      <Footer />
    </>
  );
};

注意：data-emotion是Mantine用Emotion注入样式的标识，若实际项目中有其他基于Emotion的样式，需调整选择器避免误删。

2. 范围化Mantine样式 #

给管理后台的所有内容添加唯一父类，限制Mantine样式的作用范围：

1. 新建admin/custom-mantine.css，复制@mantine/core/styles.css的全部内容，将所有样式规则嵌套在.admin-panel选择器内；
2. 修改admin/layout.tsx，替换原样式导入并添加父容器：

import "./custom-mantine.css";
...

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

这样Mantine样式只会影响.admin-panel内部的元素，不会污染公共区域。

3. 路由跳转时触发整页刷新 #

如果以上方法效果不佳，可在从管理后台跳转到公共区域时，用window.location.href替代Next.js的路由跳转API，强制整页刷新：

// 管理后台内的跳转逻辑示例
const navigateToPublic = () => {
  window.location.href = "/";
};

内容的提问来源于stack exchange，提问作者Viki