Next.js中如何通过CSS Modules为特定页面的html标签设置平滑滚动？

方法一：通过React useEffect动态控制样式 #

无需依赖CSS Modules，直接在目标页面组件中操作html元素的内联样式，精准控制生效范围：

import { useEffect } from 'react';

export default function BlogPage() {
  useEffect(() => {
    // 页面挂载时开启平滑滚动
    document.documentElement.style.scrollBehavior = 'smooth';
    
    // 页面卸载时恢复默认行为，避免影响其他页面
    return () => {
      document.documentElement.style.scrollBehavior = 'auto';
    };
  }, []);

  return (
    <div>
      {/* 你的博客页面内容 */}
    </div>
  );
}

方法二：结合CSS Modules与全局类 #

如果偏好通过CSS管理样式，可以用动态添加全局类的方式实现：

1. 在页面组件中，通过useEffect给html元素添加/移除全局类：

import { useEffect } from 'react';

export default function BlogPage() {
  useEffect(() => {
    document.documentElement.classList.add('smooth-scroll');
    return () => {
      document.documentElement.classList.remove('smooth-scroll');
    };
  }, []);

  return (
    <div>
      {/* 你的博客页面内容 */}
    </div>
  );
}

2. 在对应页面的CSS Modules文件（如blog.module.css）中定义全局类样式：

:global(.smooth-scroll) {
  scroll-behavior: smooth;
}

关于你之前写法的报错原因 #

CSS Modules要求所有选择器必须包含至少一个本地类/ID（未被:global包裹的类），同时html是根元素，无法通过页面内的本地类后代选择器选中它——这就是你之前的写法触发语法错误且无法生效的核心原因。

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