CSS-в-JS

Предупреждение: Библиотеки CSS-в-JS, которые требуют выполнения JavaScript, в настоящее время не поддерживаются в компонентах сервера. Использование CSS-в-JS с новыми функциями React, такими как компоненты сервера и потоковая передача, требует от авторов библиотек поддержки последней версии React, включая конкурентное рендеринг.

Мы работаем с командой React над API для обработки ресурсов CSS и JavaScript с поддержкой компонентов сервера React и архитектуры потоковой передачи.

В компонентах клиента поддерживаются следующие библиотеки в каталоге app (в алфавитном порядке):

Над поддержкой в настоящее время работают следующие:

emotion

Важно знать: Мы тестируем различные библиотеки CSS-в-JS, и добавим больше примеров для библиотек, которые поддерживают функции React 18 и/или каталог app.

Если вы хотите стилизовать компоненты сервера, рекомендуется использовать модули CSS или другие решения, которые выводят файлы CSS, такие как PostCSS или Tailwind CSS.

Настройка CSS-в-JS в приложении

Настройка CSS-в-JS — это трехэтапный процесс с включением:

Регистр стилей для сбора всех правил CSS в рендеринге.
Новый крючок useServerInsertedHTML для внедрения правил перед любым содержимым, которое может их использовать.
Компонент клиента, который обертывает ваше приложение с помощью регистра стилей во время начального рендеринга на стороне сервера.

styled-jsx

Использование styled-jsx в компонентах клиента требует использования v5.1.0. Сначала создайте новый регистр:

'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.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>
}

Затем оберните свой корневой макет регистром:

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

Посмотреть пример здесь.

Styled Components

Ниже приведен пример настройки styled-components@6 или более поздних версий:

Сначала включите styled-components в next.config.js.

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

Затем используйте API styled-components для создания глобального компонента регистра, собирающего все правила стилей CSS, сгенерированные во время рендеринга, и функцию для возврата этих правил. Затем используйте крючок useServerInsertedHTML для внедрения собранных стилей в тег <head> HTML в корневом макете.

'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.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 корневого макета компонентом регистра стилей:

import StyledComponentsRegistry from './lib/registry'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
      </body>
    </html>
  )
}

Посмотреть пример здесь.

Важно знать:

Во время рендеринга на сервере стили будут извлечены в глобальный регистр и выведены в тег <head> вашего HTML. Это гарантирует, что правила стилей будут размещены перед любым содержимым, которое может их использовать. В будущем мы можем использовать предстоящую функцию React для определения места вставки стилей.

Во время потоковой передачи стили из каждого фрагмента будут собираться и добавляться к существующим стилям. После завершения кеширования на стороне клиента, styled-components будет работать как обычно и вставит любые дополнительные динамические стили.

Мы специально используем компонент клиента на верхнем уровне дерева для регистра стилей, потому что таким образом более эффективно извлекать правила CSS. Это предотвращает повторную генерацию стилей при последующих рендерингах на сервере и предотвращает их отправку в нагрузке компонента сервера.

Для продвинутых случаев использования, когда вам нужно настроить отдельные свойства компиляции styled-components, вы можете прочитать нашу справочную информацию по API styled-components в Next.js, чтобы узнать больше.

© 2024 Vercel, Inc.
Licensed under the MIT License.
https://nextjs.org/docs/app/building-your-application/styling/css-in-js