NextJS中文文档 - Css

Next.js 提供了几种在应用程序中使用 CSS 的方式，包括：

• CSS Modules
• 全局 CSS
• 外部样式表
• Tailwind CSS
• Sass
• CSS-in-JS

CSS Modules

CSS Modules 通过生成唯一的类名来局部作用域化 CSS。这允许你在不同的文件中使用相同的类名，而不用担心命名冲突。

全局 CSS

你可以使用全局 CSS 在整个应用程序中应用样式。

外部样式表

样式化技巧

条件样式

在 React 中，你可以使用条件语句来有条件地应用类名：

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

export default function Page() {
  const isActive = true

  return (
    <div className={`${styles.button} ${isActive ? styles.active : styles.inactive}`}>按钮</div>
  )
}

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

export default function Page() {
  const isActive = true

  return (
    <div className={`${styles.button} ${isActive ? styles.active : styles.inactive}`}>按钮</div>
  )
}

动态样式

由于 CSS Modules 生成唯一的类名，你可以安全地动态生成类名：

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

export default function Page() {
  const color = 'red'

  return <div className={styles[color]}>Hello</div>
}

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

export default function Page() {
  const color = 'red'

  return <div className={styles[color]}>Hello</div>
}

模板字符串

你也可以使用模板字符串来组合多个类名：

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

export default function Page() {
  return <div className={`${styles.button} ${styles.primary}`}>按钮</div>
}

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

export default function Page() {
  return <div className={`${styles.button} ${styles.primary}`}>按钮</div>
}

clsx 库

clsx 是一个流行的库，用于有条件地构建 className 字符串。我们建议使用它来管理多个类名：

import clsx from 'clsx'
import styles from './styles.module.css'

export default function Page() {
  return (
    <div
      className={clsx(styles.button, {
        [styles.primary]: true,
        [styles.secondary]: false,
      })}
    >
      按钮
    </div>
  )
}

import clsx from 'clsx'
import styles from './styles.module.css'

export default function Page() {
  return (
    <div
      className={clsx(styles.button, {
        [styles.primary]: true,
        [styles.secondary]: false,
      })}
    >
      按钮
    </div>
  )
}

顺序和合并

Next.js 在生产构建过程中通过自动分块（合并）样式表来优化 CSS。你的 CSS 的顺序取决于你在代码中导入样式的顺序。

例如，base-button.module.css 会在 page.module.css 之前排序，因为 <BaseButton> 在 page.module.css 之前导入：

import { BaseButton } from './base-button'
import styles from './page.module.css'

export default function Page() {
  return <BaseButton className={styles.primary} />
}

import { BaseButton } from './base-button'
import styles from './page.module.css'

export default function Page() {
  return <BaseButton className={styles.primary} />
}

import styles from './base-button.module.css'

export function BaseButton() {
  return <button className={styles.primary} />
}

import styles from './base-button.module.css'

export function BaseButton() {
  return <button className={styles.primary} />
}

建议

为了保持 CSS 顺序的可预测性：

• 尽量将 CSS 导入限制在单个 JavaScript 或 TypeScript 入口文件中
• 在应用程序的根目录中导入全局样式和 Tailwind 样式表
• 对于嵌套组件，使用 CSS Modules 而不是全局样式
• 为你的 CSS 模块使用一致的命名约定。例如，使用 <name>.module.css 而不是 <name>.tsx
• 将共享样式提取到共享组件中，以避免重复导入
• 关闭自动排序导入的 linter 或格式化工具，如 ESLint 的 sort-imports
• 你可以使用 next.config.js 中的 cssChunking 选项来控制 CSS 如何分块

开发环境与生产环境

• 在开发环境（next dev）中，CSS 更新会通过 Fast Refresh 立即应用
• 在生产环境（next build）中，所有 CSS 文件会自动连接成多个经过压缩和代码分割的 .css 文件，确保为每个路由加载最少量的 CSS
• 在生产环境中，即使禁用 JavaScript，CSS 仍然会加载，但在开发环境中需要 JavaScript 来支持 Fast Refresh
• CSS 顺序在开发环境中的行为可能不同，始终要检查构建（next build）以验证最终的 CSS 顺序