如何在NextJS中于CSS-in-JS全局样式后加载第三方样式表？

以下是几个可行的解决思路，按推荐程度排序：

1. 动态导入第三方样式（最推荐） #

在_app.tsx或目标组件中，先执行Stitches的globalCss，再通过useEffect动态加载第三方样式，确保加载顺序符合预期：

// _app.tsx
import { useEffect } from 'react';
import { globalCss } from '@stitches/react';

const globalStyles = globalCss({
  // 你的全局重置/归一化样式
  '*': { margin: 0, padding: 0, boxSizing: 'border-box' },
  // ...其他全局样式规则
});

function MyApp({ Component, pageProps }) {
  // 先注入全局样式
  globalStyles();

  // 延迟加载第三方样式，确保在全局样式之后生效
  useEffect(() => {
    import('@third-party/styles.css');
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

这种方式利用React的生命周期，让第三方样式在客户端全局样式注入完成后再加载，自然能覆盖全局重置的样式。

2. 移至_document.tsx手动引入 #

NextJS的_document.tsx是HTML模板的入口，你可以在这里手动添加第三方样式的链接标签，确保它在Stitches客户端样式之后加载：

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* 引入第三方样式，会在Stitches客户端样式注入后生效 */}
          <link rel="stylesheet" href="/third-party/styles.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

如果第三方样式是npm包资源，需要先将其拷贝到public目录，或通过webpack配置处理资源路径。

3. 提升第三方样式优先级（兜底方案） #

若上述方法不适用，可通过CSS层叠规则增强第三方样式的优先级：

• 给需要保留的样式添加!important声明
• 使用更具体的CSS选择器（比如组合组件类名与标签名）

示例：

/* 自定义覆盖样式 */
.third-party-card {
  margin: 1.5rem !important;
  padding: 1rem !important;
}

这种方式不够优雅，仅建议作为临时兜底方案使用。

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