编辑“︁Next.js CSS模块”︁

= Next.js CSS模块 =

== 介绍 ==
'''Next.js CSS模块'''是Next.js框架中用于实现组件级样式隔离的技术，它通过自动生成唯一的类名避免全局CSS污染。CSS模块（CSS Modules）是原生CSS文件的扩展（后缀为<code>.module.css</code>），在编译时会将类名转换为哈希字符串，确保样式仅作用于当前组件。

=== 核心特性 ===
* '''局部作用域'''：类名默认仅在导入它们的组件内生效。
* '''自动生成唯一类名'''：如<code>.button</code>可能被编译为<code>._1a2b3c_button</code>。
* '''支持所有CSS特性'''：包括伪类、媒体查询、动画等。
* '''与Sass/Less集成'''：可通过配置支持预处理器。

== 基础用法 ==
以下是一个典型的CSS模块使用流程：

=== 1. 创建CSS模块文件 ===
新建<code>styles/Button.module.css</code>：
<syntaxhighlight lang="css">
/* 定义局部样式 */
.primary {
  background-color: #0070f3;
  padding: 8px 16px;
  border-radius: 4px;
}

/* 支持伪类 */
.primary:hover {
  opacity: 0.9;
}
</syntaxhighlight>

=== 2. 在组件中导入 ===
在React组件中通过对象语法引用：
<syntaxhighlight lang="javascript">
import styles from './Button.module.css';

function Button() {
  return (
    <button className={styles.primary}>
      Click Me
    </button>
  );
}
</syntaxhighlight>

=== 编译结果 ===
最终生成的HTML会包含哈希类名：
<syntaxhighlight lang="html">
<button class="_1a2b3c_primary">Click Me</button>
</syntaxhighlight>

== 高级特性 ==
=== 组合类名 ===
使用<code>composes</code>实现样式复用：
<syntaxhighlight lang="css">
/* base.module.css */
.base {
  font-size: 16px;
}

/* Button.module.css */
.text {
  composes: base from './base.module.css';
  color: #333;
}
</syntaxhighlight>

=== 动态类名 ===
通过模板字符串动态选择类：
<syntaxhighlight lang="javascript">
function DynamicButton({ isPrimary }) {
  return (
    <button className={isPrimary ? styles.primary : styles.secondary}>
      Toggle Style
    </button>
  );
}
</syntaxhighlight>

== 实际案例 ==
=== 响应式导航栏 ===
结合CSS模块与媒体查询：
<syntaxhighlight lang="css">
/* Navbar.module.css */
.nav {
  display: flex;
}

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
  }
}
</syntaxhighlight>

=== 主题切换 ===
通过CSS变量实现动态主题：
<syntaxhighlight lang="css">
/* theme.module.css */
.container {
  --bg-color: white;
  background: var(--bg-color);
}

.dark {
  --bg-color: #222;
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
function ThemeToggle() {
  const [isDark, setIsDark] = useState(false);
  
  return (
    <div className={`${styles.container} ${isDark ? styles.dark : ''}`}>
      <button onClick={() => setIsDark(!isDark)}>
        Toggle Theme
      </button>
    </div>
  );
}
</syntaxhighlight>

== 性能优化 ==
Next.js的CSS模块在构建时会：
# 自动移除未使用的样式（通过Tree Shaking）
# 生成静态CSS文件（非运行时处理）
# 支持代码分割（按需加载样式）

<mermaid>
graph LR
  A[CSS Modules] --> B[编译时处理]
  B --> C[生成唯一类名]
  B --> D[移除死代码]
  B --> E[生成优化后的CSS]
</mermaid>

== 数学表示 ==
样式隔离过程可以表示为：
<math>
f(className, filePath) \rightarrow hashedClassName
</math>
其中：
* <math>filePath</math> 是模块的绝对路径
* 哈希函数保证 <math>P(hashedClassName_{A} = hashedClassName_{B}) \approx 0</math>

== 注意事项 ==
* 全局样式应放入<code>_app.js</code>引入的普通CSS文件
* 类名不能包含特殊字符（如<code>@</code>, <code>:</code>）
* 测试时需要处理类名动态生成的问题

== 总结 ==
Next.js CSS模块提供了可预测的样式作用域机制，既保留了CSS的灵活性，又解决了全局污染问题。通过本指南的学习，开发者可以：
1. 安全地编写组件级样式
2. 实现样式复用与组合
3. 构建可维护的前端架构

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js基础]]