编辑“︁Next.js CSS-in-JS”︁

{{DISPLAYTITLE:Next.js CSS-in-JS}}

'''Next.js CSS-in-JS''' 是一种在 Next.js 框架中实现样式管理的现代方法，它允许开发者直接在 JavaScript 或 TypeScript 文件中编写 CSS 样式，从而实现组件级别的样式封装和动态样式处理。这种方法结合了 CSS 的灵活性和 JavaScript 的动态能力，是构建可维护、高性能前端应用的重要技术之一。

== 概述 ==
CSS-in-JS 是一种将 CSS 样式直接嵌入 JavaScript 代码中的技术，它通过运行时或编译时工具将样式注入到 DOM 中。在 Next.js 中，CSS-in-JS 的解决方案通常与 React 组件紧密结合，提供以下优势：
* **组件级作用域**：样式仅作用于特定组件，避免全局污染。
* **动态样式**：可以根据组件状态或 props 动态生成样式。
* **代码组织**：样式和逻辑可以放在同一文件中，提高可维护性。
* **性能优化**：支持按需加载和代码分割。

Next.js 支持多种 CSS-in-JS 库，如 [[styled-components]]、[[Emotion]] 和 [[Linaria]]。以下章节将详细介绍其用法和实际应用。

== 核心概念 ==
=== 1. 基本语法 ===
CSS-in-JS 的核心思想是通过 JavaScript 模板字符串或对象语法定义样式。以下是一个使用 `styled-components` 的示例：

<syntaxhighlight lang="javascript">
import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;

// 使用组件
function App() {
  return (
    <div>
      <Button>普通按钮</Button>
      <Button primary>主要按钮</Button>
    </div>
  );
}
</syntaxhighlight>

'''输出效果'''：
* 第一个按钮为灰色背景。
* 第二个按钮为蓝色背景（通过 `primary` prop 动态设置）。

=== 2. 样式动态化 ===
CSS-in-JS 支持基于组件状态或 props 的动态样式。例如：
<syntaxhighlight lang="javascript">
const DynamicBox = styled.div`
  width: 100px;
  height: 100px;
  background: ${({ theme }) => theme.colors.primary};
  opacity: ${({ isActive }) => (isActive ? 1 : 0.5)};
`;
</syntaxhighlight>

=== 3. 主题支持 ===
多数 CSS-in-JS 库支持主题机制。以 `ThemeProvider` 为例：
<syntaxhighlight lang="javascript">
import { ThemeProvider } from 'styled-components';

const theme = {
  colors: { primary: 'purple' }
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <DynamicBox isActive={true} />
    </ThemeProvider>
  );
}
</syntaxhighlight>

== 性能优化 ==
Next.js 通过以下方式优化 CSS-in-JS：
* **静态提取**：在构建时将 CSS 提取为静态文件（如 `linaria`）。
* **关键路径 CSS**：自动注入首屏关键样式。
* **代码分割**：按需加载样式。

<mermaid>
graph LR
  A[组件加载] --> B{是否已渲染?}
  B -->|否| C[注入样式]
  B -->|是| D[复用样式]
</mermaid>

== 实际案例 ==
=== 案例 1：响应式导航栏 ===
<syntaxhighlight lang="javascript">
const Navbar = styled.nav`
  display: flex;
  @media (max-width: 768px) {
    flex-direction: column;
  }
`;
</syntaxhighlight>

=== 案例 2：动画按钮 ===
<syntaxhighlight lang="javascript">
const PulseButton = styled.button`
  animation: pulse 2s infinite;

  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
`;
</syntaxhighlight>

== 数学公式支持 ==
在样式中计算尺寸时可能需要公式：
<math>scale = \frac{currentWidth}{baseWidth}</math>

== 总结 ==
{| class="wikitable"
|-
! 方案 !! 优点 !! 缺点
|-
| styled-components | 语法直观，社区大 | 运行时开销
|-
| Emotion | 高性能，支持 SSR | 配置复杂
|-
| Linaria | 零运行时，静态提取 | 动态能力有限
|}

Next.js CSS-in-JS 提供了强大的样式管理能力，适合从初学者到高级开发者的各类场景。通过合理选择库和优化策略，可以平衡开发体验与应用性能。

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