styled-components Styled Components
Last updated: 2026-11-02
styled-components Styled Components
styled-components is the flagship CSS-in-JS library: you write CSS inside JavaScript with tagged template literals, and every styled component comes with a unique class name and its own scope. Conditional styles are derived from props, and a theme is injected through ThemeProvider, so one design system can be shared across the whole application instead of being scattered across stylesheets.
| Group | Ecosystem |
|---|---|
| Kind | Library |
| Since | v6 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
npm install styled-components
import styled, { ThemeProvider } from 'styled-components'
const Button = styled.button`
background: ${p => (p.$variant === 'danger' ? '#dc2626' : '#2563eb')};
color: #fff; border: none; border-radius: 6px;
`
// Usage: <Button $variant="danger">Delete</Button>
// Theme: <ThemeProvider theme={{ fg: '#111' }}>…</ThemeProvider>
// Read the theme inside interpolation functions with props.theme⚙️ Parameters
| styled tag template | The CSS text inside styled.button`…`; ${interpolation} functions can read props or the theme to derive conditional styles. |
|---|---|
| $variant and other transient props | Props that start with $ only take part in the styling logic and are never forwarded to the DOM — the recommended style in v6. |
| theme (ThemeProvider) | The theme object distributed through Context; every styled component can read it as props.theme inside its interpolation functions. |
Returns：No return value — see the example for third-party library usage.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Simulation: clicking the Switch theme button transitions the card background, text and border between the light and dark themes with a 0.3s CSS transition, and the button palette follows the theme as well. This shows the theme-object-drives-styles idea of CSS-in-JS; in real styled-components the theme is supplied by ThemeProvider.💡 Key Points
⚠️ Warning Runtime cost: every styled component generates and injects its styles dynamically on the client, so for performance-sensitive large lists prefer CSS Modules or Tailwind.
💡 Tip Prefix transient props with $ (for example $variant) so the styling logic is not forwarded to the DOM as a non-standard attribute, which avoids React warnings.
ℹ️ Info React Server Components (RSC) cannot use styled-components; put styled components inside a 'use client' client component.
🏷️ More Ecosystem
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q What are the advantages over Sass/Less?
A Styles live next to the component, props interpolation and theme injection are supported, and class names are automatically unique so nothing collides. The price is runtime overhead and the cost of SSR configuration, so weigh it against the size of the project.
Q Will the styles override each other?
A There are no conflicts: every styled component generates a unique class name. When nesting components, however, the normal CSS rules for equal specificity still apply, so mind the writing order.
Q What should I watch for when upgrading from v5 to v6?
A v6 removed several deprecated APIs, supports $ prefixed transient props by default and injects styles faster. Check the official migration guide item by item before upgrading; most projects need very few changes.
