在Next.js中如何针对特定页面覆盖global.css的全局样式？

1. 用页面专属CSS模块 #

Next.js原生支持CSS模块，每个页面可以单独创建对应的模块文件，类名会自动生成唯一标识，优先级高于全局样式，不会污染其他页面。

步骤：

• 在目标页面的目录下创建[页面名].module.css，比如About.module.css：

/* 覆盖全局的容器样式 */
.pageWrap {
  background-color: #f5f5f5;
  padding: 2rem;
}

• 在页面组件（比如about.js）里导入并使用这个类：

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

export default function About() {
  return (
    <div className={styles.pageWrap}>
      {/* 你的页面内容 */}
    </div>
  );
}

2. 靠CSS优先级覆盖 #

如果不想用模块，给特定页面的根元素加个唯一类名，然后写优先级更高的CSS规则就行。

比如：

• 给页面根元素加专属类：

export default function About() {
  return (
    <div className="about-page">
      {/* 页面内容 */}
    </div>
  );
}

• 在global.css里写更具体的规则（优先级比全局默认高）：

/* 全局默认样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 针对about页面的覆盖规则 */
.about-page .container {
  max-width: 900px;
  margin: 0 1rem;
}

简单调整的话，也可以直接用内联样式：

export default function About() {
  return (
    <div style={{ maxWidth: '900px', margin: '0 1rem' }}>
      {/* 页面内容 */}
    </div>
  );
}

3. 用Tailwind CSS（如果项目在用） #

如果项目集成了Tailwind，直接在元素上写Tailwind的类就能覆盖全局样式——Tailwind的类优先级设计本身就高于普通全局样式。实在需要强制覆盖的话，可以加!important后缀，但别滥用。

示例：

export default function About() {
  return (
    <div className="bg-gray-100 !max-w-[900px]">
      {/* 页面内容 */}
    </div>
  );
}

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