Next.js单个页面样式设置及DOM操作问题求助

一、先修复你的DOM操作代码 #

你当前代码存在两个关键问题：

• document.getElementById()的参数是元素的id值，不需要加.，你写的.cursor是类选择器语法，应改为cursor
• Next.js存在服务端渲染场景，直接在组件顶层执行DOM操作会报错，必须等客户端DOM挂载完成后再执行，用React的useEffect钩子实现

修正后的代码：

import { useEffect } from 'react';

export default function YourPage() {
  useEffect(() => {
    const cursor = document.getElementById('cursor');
    if (cursor) { // 增加判断避免找不到元素时报错
      cursor.style.display = 'none';
    }
  }, []); // 空依赖数组确保只在组件挂载后执行一次

  return (
    <div id="cursor">你的元素内容</div>
  );
}

二、Next.js单个页面设置样式的几种有效方法 #

1. CSS Modules（推荐） #

在对应页面的目录下创建[页面名].module.css文件，比如Home.module.css：

/* Home.module.css */
.cursor {
  display: none;
  /* 其他自定义样式 */
}

在页面组件中导入并使用：

import styles from './Home.module.css';

export default function Home() {
  return (
    <div className={styles.cursor}>页面内容</div>
  );
}

这种方式会自动做样式作用域隔离，样式仅影响当前页面。

2. styled-jsx（Next.js内置） #

直接在页面组件内编写样式，样式仅作用于当前组件：

export default function YourPage() {
  return (
    <>
      <div className="cursor">页面内容</div>
      <style jsx>{`
        .cursor {
          display: none;
          /* 其他自定义样式 */
        }
      `}</style>
    </>
  );
}

3. 内联样式 #

适合简单的单个样式设置场景：

export default function YourPage() {
  return (
    <div style={{ display: 'none' }}>页面内容</div>
  );
}

4. 常规CSS文件（需手动控制作用域） #

如果使用常规CSS文件，需通过嵌套类名精准控制样式范围，避免影响其他页面：

/* styles/your-page.css */
.your-page-container .cursor {
  display: none;
}

页面组件中：

import '../styles/your-page.css';

export default function YourPage() {
  return (
    <div className="your-page-container">
      <div className="cursor">页面内容</div>
    </div>
  );
}

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