Next.js如何配置两套互不干扰的全局CSS适配不同页面组件

方案1：Pages Router 实现 #

• 不要把博客主题的全局CSS引入到_app.tsx/_app.js中，而是仅在博客路由对应的页面组件顶部单独引入

Next.js Pages Router 天然支持在页面级引入全局CSS，只会在访问对应路由时加载该CSS，离开路由后自动卸载，不会污染其他页面样式
示例代码：

// pages/blog/[slug].js 博客详情页
import 'path/to/your/theme/global.css' // 仅在博客相关页面单独引入主题CSS
import BlogPost from '@/components/BlogPost'

export default function BlogPostPage() {
  return <BlogPost />
}

• 如果有多个博客相关页面（比如博客列表、博客分类、博客详情），可以把博客主题CSS引入抽成公共布局组件，所有博客页面复用该布局即可：

// components/BlogLayout.js
import 'path/to/your/theme/global.css'

export default function BlogLayout({ children }) {
  return <div className="blog-theme-wrapper">{children}</div>
}

// 所有博客页面复用该布局
// pages/blog/index.js
import BlogLayout from '@/components/BlogLayout'
import BlogList from '@/components/BlogList'

export default function BlogListPage() {
  return (
    <BlogLayout>
      <BlogList />
    </BlogLayout>
  )
}

方案2：App Router 实现 #

App Router 默认不允许在非根布局的组件中引入全局CSS，所以需要做额外处理：

• 方法1：将博客主题CSS转成CSS Modules，给所有规则加上父级作用域
  把博客主题的全局CSS文件后缀改成.module.css，然后在文件最外层套一层.blog-root的父选择器，之后在博客布局中引入该模块，给根节点加上对应类名即可
  示例：

  /* app/blog/theme.module.css */
  .blog-root {
    /* 把原主题的全局样式都套在这个选择器下 */
    margin: 0;
    font-family: '主题字体', sans-serif;
    color: #333;
  }
  .blog-root h1 {
    /* 原主题的h1样式 */
  }
  .blog-root p {
    /* 原主题的p样式 */
  }
  

  // app/blog/layout.js 博客组专属布局
  import styles from './theme.module.css'
  
  export default function BlogLayout({ children }) {
    return <div className={styles.blogRoot}>{children}</div>
  }
  

• 方法2：使用动态引入+内联样式加载
  用next/dynamic动态加载博客样式，仅在博客路由下插入样式标签：

  // app/blog/layout.js
  'use client'
  import { useEffect } from 'react'
  
  export default function BlogLayout({ children }) {
    useEffect(() => {
      // 页面挂载时插入博客主题CSS
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = '/path/to/theme/global.css' // 把主题CSS放到public目录下
      link.id = 'blog-theme-css'
      document.head.appendChild(link)
      // 页面卸载时移除样式
      return () => {
        document.getElementById('blog-theme-css')?.remove()
      }
    }, [])
  
    return <div>{children}</div>
  }
  

额外兼容方案（可选） #

如果主题样式优先级和原有样式冲突，可以给博客根容器加上all: initial属性重置父级样式继承，避免原有全局样式影响博客页面：

.blog-root {
  all: initial;
  /* 后面跟主题的全局样式 */
}

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