Next.js CSS模块[编辑 | 编辑源代码]

介绍[编辑 | 编辑源代码]

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

核心特性[编辑 | 编辑源代码]

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

基础用法[编辑 | 编辑源代码]

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

1. 创建CSS模块文件[编辑 | 编辑源代码]

新建styles/Button.module.css：

/* 定义局部样式 */
.primary {
  background-color: #0070f3;
  padding: 8px 16px;
  border-radius: 4px;
}

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

2. 在组件中导入[编辑 | 编辑源代码]

在React组件中通过对象语法引用：

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

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

编译结果[编辑 | 编辑源代码]

最终生成的HTML会包含哈希类名：

<button class="_1a2b3c_primary">Click Me</button>

高级特性[编辑 | 编辑源代码]

组合类名[编辑 | 编辑源代码]

使用composes实现样式复用：

/* base.module.css */
.base {
  font-size: 16px;
}

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

动态类名[编辑 | 编辑源代码]

通过模板字符串动态选择类：

function DynamicButton({ isPrimary }) {
  return (
    <button className={isPrimary ? styles.primary : styles.secondary}>
      Toggle Style
    </button>
  );
}

实际案例[编辑 | 编辑源代码]

响应式导航栏[编辑 | 编辑源代码]

结合CSS模块与媒体查询：

/* Navbar.module.css */
.nav {
  display: flex;
}

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

主题切换[编辑 | 编辑源代码]

通过CSS变量实现动态主题：

/* theme.module.css */
.container {
  --bg-color: white;
  background: var(--bg-color);
}

.dark {
  --bg-color: #222;
}

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