CSS-in-JS

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

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

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

以下库目前正在开发支持功能

emotion

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

如果您想为服务器组件设置样式，我们建议您使用CSS 模块或其他输出 CSS 文件的解决方案，例如 PostCSS 或Tailwind CSS。

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

配置 CSS-in-JS 是一个三步选择加入的过程，涉及以下内容：

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

`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
}) {
  // Only create stylesheet once with lazy initial state
  // x-ref: https://reactjs.ac.cn/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>
  )
}

查看示例.

样式化组件

下面是如何配置styled-components@6或更高版本的示例

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

next.config.js

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

然后，使用styled-components API 创建一个全局注册表组件来收集渲染期间生成的全部 CSS 样式规则，以及一个返回这些规则的函数。然后使用useServerInsertedHTML钩子将注册表中收集的样式注入到根布局中的<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
}) {
  // Only create stylesheet once with lazy initial state
  // x-ref: https://reactjs.ac.cn/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。