MENU
CSS in JS
CSS-in-JS libraries are tools that allow you to write CSS styles directly within your JavaScript code, typically inside React components. They help you style components in a modular, scoped, and dynamic way.
🔧 How They Work:
Instead of using traditional .css or .scss files, CSS-in-JS lets you:- Define styles using JavaScript objects or template literals
- Co-locate styles with components
- Leverage JS logic (like props, state, themes) directly in your styles
✅ Benefits:
- Scoped styles (no global CSS conflicts)
- Dynamic styling based on props/state
- Easier maintenance (styles live with components)
- Built-in support for themes, dark mode, etc.
The following libraries are supported in Client Components in the app directory:
- ant-design 69127 : Help designers/developers building beautiful products more flexible and working with happiness.
- chakra-ui 241127 : A component system for building products with speed.
- @fluentui/react-components : A collection of utilities, React components, and Web Components for building web applications.
- kuma-ui : Empower Your Web with Ultimate Performance and Flexibility.
- @mui/material 38507 : An open-source React component library that implements Google's Material Design.
- @mui/joy 38507 : Learn how to use Joy UI with the Next.js App Router.
- pandacss : CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience.
- stylex : The styling system that powers, facebook.com, instagram.com, whatsapp.com, threads.net.
- styled-jsx 7771 : Full, scoped and component-friendly CSS support for JSX (rendered on the server or the client).
- styled-components 232634 : Styling your way with speed, strong typing, and flexibility.
- tamagui : Make styling React on any platform a delight. Work in the same ways on both React Native and React web.
- tss-react : A CSS-in-TypeScript solution. Effortlessly express sophisticated, dynamic styles in your React components.✨
- vanilla-extract : Zero-runtime Stylesheets in TypeScript. Use TypeScript as your preprocessor. Write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time.
- emotion 17771 : A performant and flexible CSS-in-JS library.
To style Server Components, we recommend using CSS Modules, PostCSS or Tailwind CSS.
Setting up CSS-in-JS involves a three-step opt-in process:
- Style Registry - Collects all CSS rules during rendering.
- useServerInsertedHTML() Hook - Ensures styles are injected before any related content is rendered.
- Client Component Wrapper - Wraps your application with the style registry during the initial server-side render.
Next.js automatically sets up styled-jsx with either Babel or SWC, so no manual configuration is needed.
Remember to enable the 'styledComponents' option in next.config.js.
In this way, during server-side rendering, styles are extracted into a global registry and injected into the <head> of the HTML. This ensures that style rules are applied before any related content appears, preventing visual flashes in the UI.
When streaming, styles from each HTML chunk are collected and merged with the existing styles. Once client-side hydration finishes, styled-components resumes control and handles any additional dynamic styling.
A Client Component is placed at the top level of the component tree to manage the style registry efficiently. This approach avoids regenerating styles on subsequent server renders and keeps CSS out of the Server Component payload.