Next.js如何为特定页面设置全局样式 适配不同页面滚动需求

以下方案均兼容Next.js所有主流版本，无需额外引入依赖：

1. 页面挂载时动态修改body样式（最轻量化） #

直接在需要隐藏滚动的/home页面通过useEffect操作DOM样式，页面卸载时自动恢复默认：

// /home 页面组件代码，App Router需要加 'use client' 声明
'use client'
import { useEffect } from 'react'

export default function Home() {
  useEffect(() => {
    // 页面加载时隐藏滚动
    document.body.style.overflow = 'hidden'
    // 页面离开时恢复滚动
    return () => document.body.style.overflow = 'auto'
  }, [])

  return <div>首页内容</div>
}

/books页面无需做任何额外处理，访问时会自动恢复可滚动状态。

2. 动态切换body类名（适合多全局样式差异场景） #

如果两个页面还有其他全局样式差异，可以提前在全局样式表中定义类，再动态切换：

• 首先在全局css文件（如app/globals.css）中定义专属类：

body.no-scroll {
  overflow: hidden;
}

• 在/home页面中通过useEffect操作类名：

'use client'
import { useEffect } from 'react'

export default function Home() {
  useEffect(() => {
    document.body.classList.add('no-scroll')
    return () => document.body.classList.remove('no-scroll')
  }, [])

  return <div>首页内容</div>
}

3. App Router路由分组方案（无需写JS副作用） #

如果你使用Next.js 13+的App Router，可以通过路由分组给不同页面分配独立根布局，直接在布局层定义body样式：

• 调整目录结构为分组形式（带括号的分组不会出现在最终URL中）：

app/
├── (home)/
│   ├── layout.js # 首页专属布局
│   └── page.js # 对应 /home 路径
└── (default)/
    ├── layout.js # 通用布局
    └── books/
        └── page.js # 对应 /books 路径

• 首页专属布局(home)/layout.js代码：

export default function HomeLayout({ children }) {
  return (
    <html>
      <body style={{ overflow: 'hidden' }}>
        {children}
      </body>
    </html>
  )
}

• 通用布局(default)/layout.js使用默认的可滚动样式即可。

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