CSS-in-JS

警告: 需要运行时 JavaScript 的 CSS-in-JS 库目前不支持在服务器组件中使用。在新的 React 特性（如服务器组件和流式传输）中使用 CSS-in-JS，需要库作者支持最新版本的 React，包括并发渲染。

我们正在与 React 团队合作开发上游 API，以处理支持 React 服务器组件和流式架构的 CSS 和 JavaScript 资源。

以下库支持在 app 目录中的客户端组件中使用（按字母顺序排列）：

以下库目前正在开发支持：

emotion

提示： 我们正在测试不同的 CSS-in-JS 库，并将为支持 React 18 特性和/或 app 目录的库添加更多示例。

如果你想为服务器组件添加样式，我们推荐使用 CSS Modules 或其他输出 CSS 文件的解决方案，如 PostCSS 或 Tailwind CSS。

在 `app` 中配置 CSS-in-JS

配置 CSS-in-JS 是一个三步的选择性过程，包括：

一个样式注册表用于收集渲染中的所有 CSS 规则。
新的 useServerInsertedHTML hook，用于在可能使用这些规则的任何内容之前注入规则。
一个客户端组件，在初始服务器端渲染期间用样式注册表包装你的应用。

`styled-jsx`

在客户端组件中使用 styled-jsx 需要使用 v5.1.0 或更高版本。首先，创建一个新的注册表：

app/registry.tsx

"use client";
 
import React, { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { StyleRegistry, createStyleRegistry } from "styled-jsx";
 
export default function StyledJsxRegistry({
  children,
}: {
  children: React.ReactNode;
}) {
  // 只创建一次样式表，使用延迟初始状态
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [jsxStyleRegistry] = useState(() => createStyleRegistry());
 
  useServerInsertedHTML(() => {
    const styles = jsxStyleRegistry.styles();
    jsxStyleRegistry.flush();
    return <>{styles}</>;
  });
 
  return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>;
}

app/registry.js

"use client";
 
import React, { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { StyleRegistry, createStyleRegistry } from "styled-jsx";
 
export default function StyledJsxRegistry({ children }) {
  // 只创建一次样式表，使用延迟初始状态
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [jsxStyleRegistry] = useState(() => createStyleRegistry());
 
  useServerInsertedHTML(() => {
    const styles = jsxStyleRegistry.styles();
    jsxStyleRegistry.flush();
    return <>{styles}</>;
  });
 
  return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>;
}

然后，用注册表包装你的根布局：

app/layout.tsx

import StyledJsxRegistry from "./registry";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <StyledJsxRegistry>{children}</StyledJsxRegistry>
      </body>
    </html>
  );
}

app/layout.js

import StyledJsxRegistry from "./registry";
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <StyledJsxRegistry>{children}</StyledJsxRegistry>
      </body>
    </html>
  );
}

在这里查看示例。

Styled Components

以下是如何配置 styled-components@6 或更新版本的示例：

首先，在 next.config.js 中启用 styled-components。

next.config.js

module.exports = {
  compiler: {
    styledComponents: true,
  },
};

然后，使用 styled-components API 创建一个全局注册表组件来收集渲染过程中生成的所有 CSS 样式规则，以及一个返回这些规则的函数。然后使用 useServerInsertedHTML hook 将在注册表中收集的样式注入到根布局的 <head> HTML 标签中。

lib/registry.tsx

"use client";
 
import React, { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { ServerStyleSheet, StyleSheetManager } from "styled-components";
 
export default function StyledComponentsRegistry({
  children,
}: {
  children: React.ReactNode;
}) {
  // 只创建一次样式表，使用延迟初始状态
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
 
  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement();
    styledComponentsStyleSheet.instance.clearTag();
    return <>{styles}</>;
  });
 
  if (typeof window !== "undefined") return <>{children}</>;
 
  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      {children}
    </StyleSheetManager>
  );
}

lib/registry.js

"use client";
 
import React, { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { ServerStyleSheet, StyleSheetManager } from "styled-components";
 
export default function StyledComponentsRegistry({ children }) {
  // 只创建一次样式表，使用延迟初始状态
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
 
  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement();
    styledComponentsStyleSheet.instance.clearTag();
    return <>{styles}</>;
  });
 
  if (typeof window !== "undefined") return <>{children}</>;
 
  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      {children}
    </StyleSheetManager>
  );
}

用样式注册表组件包装根布局的 children：