# Styled Components — CSS-in-JS for React and React Native

> A CSS-in-JS library that lets you write actual CSS inside your JavaScript components using tagged template literals, producing scoped styles with zero class-name collisions.

## Install

Save as a script file and run:

# Styled Components — CSS-in-JS for React and React Native

## Quick Use
```bash
npm install styled-components
# In your React component:
# import styled from 'styled-components';
# const Button = styled.button`
#   background: palevioletred;
#   color: white;
#   padding: 0.5em 1em;
# `;
```

## Introduction
Styled Components lets you attach CSS directly to React components using tagged template literals. Each component gets unique, auto-generated class names, eliminating style collisions and making it easy to co-locate styles with logic. It supports server-side rendering, theming, and React Native out of the box.

## What Styled Components Does
- Creates React components with scoped CSS via tagged template literals
- Generates unique class names at runtime to prevent style collisions
- Supports dynamic styling through props interpolation inside template strings
- Provides a `ThemeProvider` for consistent design tokens across an app
- Handles vendor prefixing and server-side rendering automatically

## Architecture Overview
Styled Components uses a tagged template literal parser (stylis) to process CSS at runtime. When a styled component mounts, the library hashes the CSS, generates a unique class name, and injects a `<style>` tag into the document head. Props are passed into interpolation functions to compute dynamic values. In SSR mode, styles are collected during rendering and serialized into the HTML response to avoid flash of unstyled content.

## Self-Hosting & Configuration
- Install via npm and import directly — no build plugin required
- Enable the Babel plugin or SWC plugin for better debugging (readable class names) and smaller bundles
- Use `ServerStyleSheet` for server-side rendering with Express, Next.js, or similar
- Configure the `ThemeProvider` at the app root to pass design tokens to all styled components
- Use the `css` helper for shared style fragments and the `createGlobalStyle` API for global CSS

## Key Features
- Full CSS support including pseudo-selectors, media queries, and nesting
- Automatic critical CSS extraction — only styles for rendered components are injected
- First-class React Server Components support in v6+
- Works with React Native using the same API but native style objects
- Supports `attrs` API for setting default HTML attributes on styled elements

## Comparison with Similar Tools
- **Emotion** — similar CSS-in-JS approach with a slightly different API and smaller runtime
- **Tailwind CSS** — utility-first class approach; no runtime cost but a different mental model
- **CSS Modules** — file-scoped class names at build time; no runtime overhead
- **Vanilla Extract** — zero-runtime CSS-in-TypeScript using static extraction
- **Panda CSS** — build-time CSS-in-JS with type-safe tokens and utility classes

## FAQ
**Q: Does Styled Components work with Next.js App Router?**
A: Yes. Version 6+ supports React Server Components. Configure the SWC plugin in `next.config.js` for optimal performance.

**Q: Is there a performance cost to runtime CSS generation?**
A: There is a small overhead for first-render style injection. For most apps it is negligible, but performance-critical projects may prefer build-time solutions.

**Q: Can I use it alongside plain CSS or CSS Modules?**
A: Yes. Styled Components coexists with any other CSS approach in the same project.

**Q: How do I theme my application?**
A: Wrap your app with `<ThemeProvider theme={myTheme}>` and access `props.theme` inside any styled component.

## Sources
- https://github.com/styled-components/styled-components
- https://styled-components.com/

---
Source: https://tokrepo.com/en/workflows/3a3f76d8-41cf-11f1-9bc6-00163e2b0d79
Author: Script Depot