编辑“︁Next.js全局样式”︁（章节）

= Next.js全局样式 =

== 介绍 ==
在Next.js中，'''全局样式'''（Global Styles）是指应用于整个应用程序的CSS样式规则，与仅作用于特定组件的'''模块化CSS'''形成对比。全局样式通常用于定义网站的基础样式，如字体、颜色方案、重置样式等。

Next.js支持多种方式实现全局样式，包括：
* 传统的CSS文件
* Sass/SCSS预处理器
* CSS-in-JS解决方案
* Tailwind CSS等实用工具类框架

== 基本用法 ==

=== 创建全局样式文件 ===
在Next.js项目的根目录下创建<code>styles</code>文件夹，然后添加全局CSS文件（如<code>globals.css</code>）：

<syntaxhighlight lang="css">
/* styles/globals.css */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #f5f5f5;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</syntaxhighlight>

=== 导入全局样式 ===
在<code>_app.js</code>或<code>_app.tsx</code>中导入全局样式文件：

<syntaxhighlight lang="javascript">
// pages/_app.js
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp
</syntaxhighlight>

== 样式优先级 ==
Next.js中的样式优先级遵循CSS标准规则，但全局样式与模块化样式的关系可以通过以下图表理解：

<mermaid>
graph TD
    A[全局样式] -->|较低优先级| C(组件)
    B[模块化样式] -->|较高优先级| C
</mermaid>

== 高级用法 ==

=== 使用Sass/SCSS ===
安装Sass依赖后，可以直接使用<code>.scss</code>或<code>.sass</code>文件：

<syntaxhighlight lang="bash">
npm install sass
</syntaxhighlight>

然后创建全局Sass文件：

<syntaxhighlight lang="scss">
/* styles/globals.scss */
$primary-color: #0070f3;

body {
  background-color: lighten($primary-color, 45%);
}
</syntaxhighlight>

=== CSS变量与主题 ===
利用CSS变量实现主题切换：

<syntaxhighlight lang="css">
/* styles/globals.css */
:root {
  --primary-color: #0070f3;
  --background-color: #ffffff;
}

[data-theme='dark'] {
  --primary-color: #3291ff;
  --background-color: #111111;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}
</syntaxhighlight>

== 实际案例 ==

=== 响应式布局基础 ===
结合全局样式创建响应式布局：

<syntaxhighlight lang="css">
/* styles/globals.css */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (max-width: 768px) {
  .container {
    padding: 0 0.5rem;
  }
}
</syntaxhighlight>

=== 字体优化 ===
使用Next.js内置的字体优化功能：

<syntaxhighlight lang="javascript">
// pages/_app.js
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}
</syntaxhighlight>

== 最佳实践 ==

1. '''保持全局样式最小化'''：只将真正全局的样式放在全局样式表中
2. '''使用CSS变量'''：便于主题管理和样式复用
3. '''利用层叠特性'''：合理使用<code>!important</code>（尽量避免）
4. '''性能优化'''：考虑使用PurgeCSS等工具移除未使用的样式

== 常见问题 ==

=== 样式冲突 ===
当全局样式与组件样式冲突时，解决方案包括：
* 提高组件样式的特异性
* 使用CSS模块
* 采用BEM等命名约定

=== 服务器端渲染问题 ===
Next.js在服务器端渲染时会自动处理全局样式，但需要注意：
* 避免在组件中动态修改全局样式
* 主题切换应在客户端完成

== 数学表示 ==
样式优先级可以表示为：

<math>
Specificity = (a \times 1000) + (b \times 100) + (c \times 10) + d
</math>

其中：
* a = ID选择器的数量
* b = 类选择器、属性选择器和伪类的数量
* c = 类型选择器和伪元素的数量
* d = 通配符和关系选择器

== 总结 ==
Next.js全局样式是构建一致用户界面的基础工具。通过合理使用全局样式，开发者可以：
* 建立统一的设计系统
* 提高样式复用性
* 简化主题管理
* 优化性能

对于大型项目，建议结合CSS模块或CSS-in-JS解决方案，在保持全局样式优势的同时避免样式污染。

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