编辑“︁Next.js全局CSS”︁

= Next.js全局CSS =

== 介绍 ==
在Next.js中，'''全局CSS'''是指应用于整个应用程序的样式表，与组件级CSS（如CSS Modules或Styled JSX）不同。全局CSS通常用于定义基础样式、字体、颜色变量和重置样式等跨组件共享的规则。

Next.js默认支持全局CSS，但需要遵循特定的文件结构和导入规则。全局样式文件通常放置在项目的特定位置（如`styles`目录），并在`_app.js`文件中导入。

== 基本用法 ==
要在Next.js中使用全局CSS，请按照以下步骤操作：

1. 创建全局CSS文件（例如`styles/globals.css`）。
2. 在`_app.js`中导入该文件。

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

:root {
  --primary-color: #0070f3;
}
</syntaxhighlight>

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

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

export default MyApp
</syntaxhighlight>

== 工作原理 ==
Next.js通过`_app.js`作为应用程序的顶层组件来确保全局CSS在整个应用中生效。当浏览器加载页面时：

<mermaid>
graph TD
    A[浏览器请求页面] --> B[Next.js服务器]
    B --> C[加载_app.js]
    C --> D[注入globals.css]
    D --> E[渲染页面内容]
</mermaid>

== 最佳实践 ==

1. '''组织样式'''：将全局CSS分为多个文件（如`variables.css`、`reset.css`等），然后在`globals.css`中使用`@import`合并。
2. '''命名约定'''：使用BEM或其他命名约定避免样式冲突。
3. '''CSS变量'''：利用`:root`定义全局CSS变量，便于主题切换。

=== 进阶示例 ===
<syntaxhighlight lang="css">
/* styles/variables.css */
:root {
  --max-width: 1200px;
  --border-radius: 12px;
}

/* styles/globals.css */
@import './variables.css';

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}
</syntaxhighlight>

== 实际应用场景 ==

1. '''主题系统'''：通过全局CSS变量实现动态主题切换。
2. '''响应式设计'''：在全局CSS中定义媒体查询断点。
3. '''字体加载'''：使用`@font-face`全局加载自定义字体。

=== 主题切换示例 ===
<syntaxhighlight lang="javascript">
// 在React组件中切换主题
function ThemeToggle() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    document.documentElement.style.setProperty(
      '--primary-color',
      isDark ? '#000000' : '#0070f3'
    );
  }, [isDark]);

  return <button onClick={() => setIsDark(!isDark)}>切换主题</button>;
}
</syntaxhighlight>

== 注意事项 ==

1. '''性能影响'''：过大的全局CSS文件会影响加载性能，考虑代码分割。
2. '''样式冲突'''：全局样式可能意外影响第三方组件，使用特定选择器避免。
3. '''Tree Shaking'''：Next.js生产构建会自动优化未使用的CSS。

== 数学表示 ==
CSS特异性计算可以用以下公式表示：

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

其中：
* a = ID选择器的数量
* b = 类、属性和伪类选择器的数量
* c = 元素和伪元素选择器的数量

== 总结 ==
Next.js全局CSS是构建一致用户界面的基础工具。通过合理组织全局样式，开发者可以：
* 维护设计系统的一致性
* 实现高效的主题管理
* 优化应用程序的性能

对于更复杂的场景，可以考虑结合CSS-in-JS解决方案或CSS Modules，但全局CSS仍然是Next.js样式体系中的重要组成部分。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js样式解决方案]]