Next.js中如何为组件设置样式？

CSS Module报错常见排查项 #

CSS Module是Next.js原生支持的样式方案，出现报错优先排查以下问题：

• 文件名必须严格符合*.module.css的命名规则，module为全小写拼写，不要出现拼写错误，比如component.module.css是符合要求的命名
• 导入方式必须为默认导入，不要使用命名导入，正确导入示例：

// 组件文件内导入
import styles from './component.module.css'

// 类名调用方式
export default function MyComponent() {
  return <div className={styles.你的类名}>内容</div>
}

• 检查导入路径是否正确，相对路径需要和文件实际存储位置匹配
• 如果你使用的是Next.js 13+ App Router，所有组件默认为服务器组件，服务器组件不支持CSS Module，需要在组件第一行添加'use client'声明为客户端组件后即可正常使用。

Next.js其他常用样式方案 #

除了CSS Module外，你也可以根据场景选择以下原生支持的样式实现方式：

• 全局CSS：在Pages Router的_app.js、App Router的根layout.js中直接导入全局CSS文件，适合全局样式重置、公共通用类定义
• Tailwind CSS：Next.js官方优先推荐的样式方案，完成基础配置后可直接在组件中写工具类实现样式，适配服务端/客户端组件场景
• 内联样式：简单动态样式可直接通过style属性实现，示例：<div style={{ color: '#000', padding: '10px' }} />
• CSS-in-JS方案：如styled-components、Emotion等，按需配置后可使用，适合强关联组件与样式的场景

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