CSS 模块
示例
Next.js 内置支持使用 .module.css 扩展名的 CSS 模块。
CSS 模块通过自动创建唯一的类名来实现 CSS 的局部作用域。这允许您在不同的文件中使用相同的类名而无需担心冲突。此特性使得 CSS 模块成为包含组件级 CSS 的理想方式。
示例
例如，考虑 components/ 文件夹中的一个可重用 Button 组件：
首先，创建包含以下内容的 components/Button.module.css：
/*
您无需担心 .error {} 会与其他 `.css` 或 `.module.css` 文件冲突！
*/
.error {
color: white;
background-color: red;
}然后，创建 components/Button.js，导入并使用上述 CSS 文件：
import styles from './Button.module.css'
export function Button() {
return (
<button
type="button"
// 注意 "error" 类是通过导入的 `styles` 对象的属性访问的
className={styles.error}
>
销毁
</button>
)
}CSS 模块是一个_可选功能_，仅对具有 .module.css 扩展名的文件启用。
常规的 <link> 样式表和全局 CSS 文件仍然受支持。
在生产环境中，所有 CSS 模块文件将自动合并为多个经过压缩和代码拆分的 .css 文件。
这些 .css 文件代表了应用程序中的热执行路径，确保为应用程序加载最少数量的 CSS。
全局样式
要向应用程序添加样式表，请在 pages/_app.js 中导入 CSS 文件。
例如，考虑以下名为 styles.css 的样式表：
body {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
'Arial', sans-serif;
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}如果尚未存在，请创建一个 pages/_app.js 文件。
然后，import styles.css 文件。
import '../styles.css'
// 新的 `pages/_app.js` 文件中需要此默认导出。
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}这些样式 (styles.css) 将应用到应用程序中的所有页面和组件。
由于样式表的全局性质，为避免冲突，您只能在 pages/_app.js 中导入它们。
在开发环境中，以这种方式表达样式表允许您在编辑时热重载样式——这意味着您可以保持应用程序状态。
在生产环境中，所有 CSS 文件将自动合并为一个压缩后的 .css 文件。CSS 的合并顺序将与 CSS 导入到 _app.js 文件的顺序相匹配。特别注意包含自身 CSS 的导入 JS 模块；JS 模块的 CSS 将按照与导入 CSS 文件相同的排序规则进行合并。例如：
import '../styles.css'
// ErrorBoundary 的 CSS 依赖于 styles.css 中的全局 CSS，
// 因此我们在 styles.css 之后导入它。
import ErrorBoundary from '../components/ErrorBoundary'
export default function MyApp({ Component, pageProps }) {
return (
<ErrorBoundary>
<Component {...pageProps} />
</ErrorBoundary>
)
}外部样式表
Next.js 允许您从 JavaScript 文件导入 CSS 文件。
这是可能的，因为 Next.js 扩展了 import 的概念，使其不仅限于 JavaScript。
从 node_modules 导入样式
自 Next.js 9.5.4 起，允许从 node_modules 导入 CSS 文件到应用程序的任何位置。
对于全局样式表，如 bootstrap 或 nprogress，您应该在 pages/_app.js 中导入文件。
例如：
import 'bootstrap/dist/css/bootstrap.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}对于导入第三方组件所需的 CSS，您可以在组件中进行。例如：
import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'
function ExampleDialog(props) {
const [showDialog, setShowDialog] = useState(false)
const open = () => setShowDialog(true)
const close = () => setShowDialog(false)
return (
<div>
<button onClick={open}>打开对话框</button>
<Dialog isOpen={showDialog} onDismiss={close}>
<button className="close-button" onClick={close}>
<VisuallyHidden>关闭</VisuallyHidden>
<span aria-hidden>×</span>
</button>
<p>你好。我是一个对话框</p>
</Dialog>
</div>
)
}附加功能
Next.js 包含以下附加功能以提升样式编写的体验：