Technology & EngineeringCss Styling Services391 lines

Styled Components

"styled-components: CSS-in-JS, tagged template literals, theming, dynamic styles, SSR, global styles, extending"

Quick Summary25 lines

styled-components uses tagged template literals to write actual CSS inside JavaScript. Each styled call creates a React component with automatically generated, unique class names. This eliminates class-name collisions, dead-code elimination is automatic (unused components are tree-shaken), and styles live next to the components they belong to. The library supports dynamic styling via props, theming through React context, and server-side rendering with style extraction. styled-components embraces the idea that styling is a concern of the component, not of a separate stylesheet.

## Key Points

1. **Use transient props ($ prefix).** Prefix props that are only for styling with `$` (e.g., `$intent`, `$size`) so they are not forwarded to the DOM and do not cause React warnings.
2. **Augment DefaultTheme in TypeScript.** Declare your theme shape in `styled.d.ts` so every `theme` access inside tagged templates is type-checked and autocompleted.
3. **Co-locate styles with components.** Define styled components in the same file or a sibling `*.styles.ts` file rather than a central stylesheet.
4. **Prefer extending over prop overloading.** Use `styled(Base)` to create specialized variants rather than adding more conditional props to a single component.
5. **Register styles for SSR.** In Next.js App Router, use `useServerInsertedHTML` with `ServerStyleSheet` to avoid flash of unstyled content.
6. **Use `css` helper for shared fragments.** Extract common CSS blocks with the `css` helper function and interpolate them across styled components.
2. **Using `attrs` for frequently changing values.** `attrs` for dynamic inline styles is fine, but using it for static configuration that should be props makes the API harder to understand.
3. **Deep prop-drilling for theme values.** Access theme values via the `theme` callback in tagged templates. Do not destructure the theme in parent components and pass individual values as props.

## Quick Example

```bash
npm install styled-components
npm install -D @types/styled-components
```

```bash
npm install -D babel-plugin-styled-components
```

skilldb get css-styling-services-skills/Styled ComponentsFull skill: 391 lines

Paste into your CLAUDE.md or agent config

styled-components

Core Philosophy

styled-components uses tagged template literals to write actual CSS inside JavaScript. Each styled call creates a React component with automatically generated, unique class names. This eliminates class-name collisions, dead-code elimination is automatic (unused components are tree-shaken), and styles live next to the components they belong to. The library supports dynamic styling via props, theming through React context, and server-side rendering with style extraction. styled-components embraces the idea that styling is a concern of the component, not of a separate stylesheet.

Setup

Installation

npm install styled-components
npm install -D @types/styled-components

Babel Plugin (Optional, Recommended)

npm install -D babel-plugin-styled-components

// .babelrc
{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "displayName": true,
        "ssr": true,
        "meaninglessFileNames": ["index", "styles"]
      }
    ]
  ]
}

Next.js Configuration

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  compiler: {
    styledComponents: true,
  },
};

export default nextConfig;

SSR Registry for Next.js App Router

// lib/styled-components-registry.tsx
"use client";

import React, { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { ServerStyleSheet, StyleSheetManager } from "styled-components";

export function StyledComponentsRegistry({
  children,
}: {
  children: React.ReactNode;
}) {
  const [sheet] = useState(() => new ServerStyleSheet());

  useServerInsertedHTML(() => {
    const styles = sheet.getStyleElement();
    sheet.instance.clearTag();
    return <>{styles}</>;
  });

  if (typeof window !== "undefined") return <>{children}</>;

  return (
    <StyleSheetManager sheet={sheet.instance}>{children}</StyleSheetManager>
  );
}

// app/layout.tsx
import { StyledComponentsRegistry } from "@/lib/styled-components-registry";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
      </body>
    </html>
  );
}

Key Techniques

Defining a Theme

// theme.ts
export const lightTheme = {
  colors: {
    brand: "#3b82f6",
    brandDark: "#1d4ed8",
    surface: "#ffffff",
    textPrimary: "#111827",
    textSecondary: "#6b7280",
    border: "#e5e7eb",
    danger: "#ef4444",
    success: "#22c55e",
  },
  space: {
    xs: "0.25rem",
    sm: "0.5rem",
    md: "1rem",
    lg: "1.5rem",
    xl: "2rem",
    "2xl": "3rem",
  },
  radii: {
    sm: "0.25rem",
    md: "0.5rem",
    lg: "0.75rem",
    full: "9999px",
  },
  fontSizes: {
    sm: "0.875rem",
    base: "1rem",
    lg: "1.125rem",
    xl: "1.25rem",
    "2xl": "1.5rem",
    "3xl": "1.875rem",
  },
  shadows: {
    sm: "0 1px 2px rgba(0,0,0,0.05)",
    md: "0 4px 6px rgba(0,0,0,0.07)",
    lg: "0 10px 15px rgba(0,0,0,0.1)",
  },
} as const;

export const darkTheme: typeof lightTheme = {
  colors: {
    brand: "#60a5fa",
    brandDark: "#3b82f6",
    surface: "#1f2937",
    textPrimary: "#f9fafb",
    textSecondary: "#9ca3af",
    border: "#374151",
    danger: "#f87171",
    success: "#4ade80",
  },
  space: lightTheme.space,
  radii: lightTheme.radii,
  fontSizes: lightTheme.fontSizes,
  shadows: {
    sm: "0 1px 2px rgba(0,0,0,0.3)",
    md: "0 4px 6px rgba(0,0,0,0.4)",
    lg: "0 10px 15px rgba(0,0,0,0.5)",
  },
};

export type AppTheme = typeof lightTheme;

TypeScript Theme Augmentation

// styled.d.ts
import "styled-components";
import type { AppTheme } from "./theme";

declare module "styled-components" {
  export interface DefaultTheme extends AppTheme {}
}

Theme Provider

"use client";

import { ThemeProvider } from "styled-components";
import { lightTheme, darkTheme } from "@/theme";
import { useThemeMode } from "@/hooks/useThemeMode";

export function AppThemeProvider({ children }: { children: React.ReactNode }) {
  const { mode } = useThemeMode();
  return (
    <ThemeProvider theme={mode === "dark" ? darkTheme : lightTheme}>
      {children}
    </ThemeProvider>
  );
}