# vercel/styled-jsx

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/vercel-styled-jsx).**

7,785 stars · 267 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/vercel/styled-jsx
- Homepage: http://npmjs.com/styled-jsx
- awesome-repositories: https://awesome-repositories.com/repository/vercel-styled-jsx.md

## Topics

`css` `css-in-js` `dynamic-styles` `jsx` `react` `shadow-dom`

## Description

styled-jsx is a CSS-in-JS library and styling framework for JSX components. It functions as a scoped CSS engine that uses compile-time transformations to generate unique class names, preventing style leakage between components.

The system includes a server-side CSS renderer that flushes styles into HTML to prevent layout flicker during the first paint. It ensures security compliance by attaching per-request nonces to generated style tags to satisfy Content Security Policy requirements.

The framework covers global CSS management with deduplication, dynamic styling via template interpolation, and modular organization through external style definitions. It also provides mechanisms for targeting third-party components and transforming styles at compile time using plugins.

## Tags

### User Interface & Experience

- [Scoped CSS Modules](https://awesome-repositories.com/f/user-interface-experience/scoped-css-modules.md) — Isolates styles to specific components using build-time scoping to prevent CSS leakage and naming conflicts.
- [Style Isolation Mechanisms](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/style-isolation-mechanisms.md) — Prevents style leakage by scoping CSS to specific components through compile-time transformations. ([source](https://github.com/vercel/styled-jsx))
- [JSX Styling Solutions](https://awesome-repositories.com/f/user-interface-experience/jsx-styling-solutions.md) — Offers a comprehensive styling solution for JSX-based component trees, balancing dynamic and global styles.
- [CSS-in-JS Implementations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/css-in-js-implementations.md) — Provides a system for embedding scoped CSS styles directly within JavaScript files for JSX components.
- [Dynamic Styling Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/dynamic-styling-systems.md) — Provides mechanisms for updating visual styles at runtime by linking CSS values to component state.
- [Dynamic Style Injection](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/dynamic-styling-systems/dynamic-style-injection.md) — Uses template interpolation to inject dynamic CSS values derived from component state into styles at runtime. ([source](https://github.com/vercel/styled-jsx/blob/main/readme.md))
- [CSS Scoping Engines](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/build-time-style-processing/css-scoping-engines.md) — Uses a build-time engine to isolate component styles by generating unique class names.
- [Scoped Style Generators](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/scoped-style-generators.md) — Provides utilities for generating unique class names to isolate styles to specific components.
- [CSS Preprocessing](https://awesome-repositories.com/f/user-interface-experience/css-preprocessing.md) — Transforms advanced style definitions into standard CSS during the build process using custom plugins. ([source](https://github.com/vercel/styled-jsx))
- [Global Selector Overrides](https://awesome-repositories.com/f/user-interface-experience/global-selector-overrides.md) — Allows bypassing the automatic scoping mechanism to target global elements or third-party components. ([source](https://github.com/vercel/styled-jsx))
- [Global CSS Stylings](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/global-css-stylings.md) — Enables the definition of application-wide styles with a deduplication system to maintain a consistent look.
- [Deduplicated Registries](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/global-css-stylings/global-tag-styling/deduplicated-registries.md) — Implements a global style registry that deduplicates CSS rules before injection into the document head.
- [Third-Party Component Styling](https://awesome-repositories.com/f/user-interface-experience/third-party-client-styling/third-party-component-styling.md) — Enables the targeting of elements within external third-party components using global selectors or resolved class names. ([source](https://github.com/vercel/styled-jsx/blob/main/readme.md))

### Programming Languages & Runtimes

- [Style Interpolations](https://awesome-repositories.com/f/programming-languages-runtimes/programming-utilities/string-utilities/string-manipulators/template-interpolation/style-interpolations.md) — Allows binding CSS variables to component state through template interpolation during the render process.

### Software Engineering & Architecture

- [Server-Side Rendering Style Registries](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/framework-specific-integrations/server-side-rendering-style-registries.md) — Collects and flushes generated CSS styles during server-side rendering to prevent layout flicker.

### Web Development

- [Server-Side Rendering Utilities](https://awesome-repositories.com/f/web-development/rendering-templating/server-side-rendering-utilities.md) — Implements server-side rendering utilities to extract and flush styles into the final HTML output.
- [Style Transformation Utilities](https://awesome-repositories.com/f/web-development/style-transformation-utilities.md) — Transforms CSS strings into optimized scoped rules during the build process to prevent style leakage.
- [CSS Plugin Frameworks](https://awesome-repositories.com/f/web-development/build-tooling/plugin-ecosystems/css-plugin-frameworks.md) — Provides a framework for using JavaScript modules as plugins to transform CSS abstract syntax trees at compile time. ([source](https://github.com/vercel/styled-jsx/blob/main/readme.md))

### Security & Cryptography

- [Content Security Policy Nonce Support](https://awesome-repositories.com/f/security-cryptography/content-security-policy-nonce-support.md) — Attaches security nonces to generated style tags to comply with strict Content Security Policy requirements.