If you want to style Server Components, we recommend using CSS Modules or other solutions that output CSS files, like PostCSS or Tailwind CSS.Configuring CSS-in-JS in app
Configuring CSS-in-JS is a three-step opt-in process that involves:
A style registry to collect all CSS rules in a render.
The new useServerInsertedHTML hook to inject rules before any content that might use them.
A Client Component that wraps your app with the style registry during initial server-side rendering.
styled-jsx
Using styled-jsx in Client Components requires using v5.1.0. First, create a new registry: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,