编辑“︁Next.js Styled Components”︁

= Next.js Styled Components =

'''Next.js Styled Components''' 是一种在 [[Next.js]] 框架中使用 CSS-in-JS 的样式解决方案，它结合了 [[Styled Components]] 库的功能与 Next.js 的服务端渲染（SSR）和静态生成（SSG）能力。这种方法允许开发者直接在 JavaScript 或 TypeScript 文件中编写样式，同时保持组件化和动态化的优势。

== 介绍 ==
Styled Components 是一个流行的 CSS-in-JS 库，它通过模板字符串语法创建带有样式的组件。在 Next.js 中使用 Styled Components 需要额外的配置，以确保样式在服务端渲染时正确加载，并避免客户端和服务端之间的样式闪烁问题。

=== 核心特点 ===
* '''组件化样式'''：样式与组件紧密耦合，减少全局样式冲突。
* '''动态样式'''：支持基于 props 或主题的动态样式调整。
* '''服务端渲染支持'''：通过 Babel 或 SWC 插件确保 SSR 兼容性。
* '''自动前缀'''：自动添加浏览器前缀以提高兼容性。

== 安装与配置 ==
要在 Next.js 项目中使用 Styled Components，首先需要安装依赖：

<syntaxhighlight lang="bash">
npm install styled-components
npm install --save-dev babel-plugin-styled-components
</syntaxhighlight>

然后，在 Next.js 项目的 <code>next.config.js</code> 中启用 SWC 插件（如果使用 SWC 而非 Babel）：

<syntaxhighlight lang="javascript">
// next.config.js
module.exports = {
  compiler: {
    styledComponents: true,
  },
};
</syntaxhighlight>

或者，通过 <code>.babelrc</code> 配置 Babel 插件：

<syntaxhighlight lang="json">
{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}
</syntaxhighlight>

== 基本用法 ==
以下是一个简单的 Styled Components 示例，创建一个带样式的按钮：

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

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

  &:hover {
    opacity: 0.8;
  }
`;

export default function Home() {
  return (
    <div>
      <Button>Normal Button</Button>
      <Button primary>Primary Button</Button>
    </div>
  );
}
</syntaxhighlight>

=== 输出效果 ===
* 第一个按钮为灰色背景（默认样式）。
* 第二个按钮为蓝色背景（通过 <code>primary</code> prop 动态设置）。
* 悬停时两个按钮都会变为 80% 透明度。

== 高级功能 ==

=== 主题支持 ===
Styled Components 提供 <code>ThemeProvider</code> 来实现主题共享：

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

const theme = {
  colors: {
    primary: 'blue',
    secondary: 'green'
  }
};

const ThemedButton = styled.button`
  background: ${props => props.theme.colors.primary};
`;

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <ThemedButton>Themed Button</ThemedButton>
    </ThemeProvider>
  );
}
</syntaxhighlight>

=== 全局样式 ===
使用 <code>createGlobalStyle</code> 定义全局样式：

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

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    font-family: Arial;
  }
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <div>My App</div>
    </>
  );
}
</syntaxhighlight>

== 服务端渲染处理 ==
Next.js 的 SSR 需要特殊处理以避免样式闪烁。配置完成后，Styled Components 会自动生成服务端所需的样式标签：

<mermaid>
sequenceDiagram
    participant Server
    participant Client
    Server->>Client: 发送HTML + 内联样式
    Client->>Client: 接管样式（hydration）
</mermaid>

== 性能优化 ==
* '''代码分割'''：每个组件的样式自动按需加载。
* '''静态提取'''：生产环境下样式会被提取为静态 CSS 文件。
* '''避免重复渲染'''：通过 <code>shouldForwardProp</code> 过滤不必要的 prop 更新。

== 实际案例 ==
=== 动态主题切换 ===
<syntaxhighlight lang="javascript">
import { useState } from 'react';
import { ThemeProvider } from 'styled-components';

const lightTheme = { background: 'white', text: 'black' };
const darkTheme = { background: 'black', text: 'white' };

const Container = styled.div`
  background: ${props => props.theme.background};
  color: ${props => props.theme.text};
`;

export default function ThemeSwitcher() {
  const [isDark, setIsDark] = useState(false);
  return (
    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <Container>
        <button onClick={() => setIsDark(!isDark)}>
          Toggle Theme
        </button>
        <p>Current theme: {isDark ? 'Dark' : 'Light'}</p>
      </Container>
    </ThemeProvider>
  );
}
</syntaxhighlight>

== 与其他方案的比较 ==
{| class="wikitable"
|-
! 特性 !! Styled Components !! CSS Modules !! Tailwind CSS
|-
| 作用域 || 组件级 || 模块级 || 实用类
|-
| 动态样式 || 优秀 || 有限 || 中等
|-
| SSR支持 || 需要配置 || 内置 || 内置
|-
| 学习曲线 || 中等 || 低 || 高
|}

== 最佳实践 ==
1. 为常用样式组件创建 <code>styled-components</code> 工具库
2. 使用 <code>attrs</code> 方法优化静态属性：
   <syntaxhighlight lang="javascript">
   const Input = styled.input.attrs({ type: 'text' })`
     border: 1px solid #ccc;
   `;
   </syntaxhighlight>
3. 在大型项目中考虑使用 <code>StyleSheetManager</code> 进行高级控制

== 常见问题 ==
=== 样式闪烁 ===
确保正确配置了服务端渲染支持，检查 <code>_document.js</code> 是否包含样式收集：

<syntaxhighlight lang="javascript">
import Document from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}
</syntaxhighlight>

== 数学公式示例 ==
当需要计算响应式尺寸时，可以使用公式：
<math>fontSize = baseFontSize * scaleFactor^{level}</math>
其中：
* <math>baseFontSize</math> = 16px (默认)
* <math>scaleFactor</math> = 1.2 (黄金比例)
* <math>level</math> = 标题层级 (h1=3, h2=2, etc.)

== 总结 ==
Next.js 中的 Styled Components 提供了强大的 CSS-in-JS 解决方案，特别适合需要动态样式和服务端渲染的项目。通过合理配置和遵循最佳实践，开发者可以构建可维护、高性能的样式系统。初学者应从基础组件开始，逐步探索主题、全局样式等高级功能。

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