Styled Components

Overview

Styled Components is a CSS-in-JS library that lets you write actual CSS in your JavaScript using tagged template literals. It creates React components with styles attached, automatically handling scoping, vendor prefixing, and dynamic styling based on props.

Styled Components pioneered the CSS-in-JS movement and remains widely used. It generates unique class names at runtime, injects styles into the DOM, and supports theming, global styles, and server-side rendering. However, the runtime cost and incompatibility with React Server Components has led many teams to explore zero-runtime alternatives.

When to Use

Styled Components is suitable for existing projects already using it, or when dynamic prop-based styling and theming are primary requirements. For new projects, consider zero-runtime alternatives like Panda CSS or vanilla-extract that offer similar DX without the runtime cost.

Getting Started

npm install styled-components

import styled from "styled-components";

const Button = styled.button<{ $primary?: boolean }>`
  background: ${(props) => (props.$primary ? "blue" : "white")};
  color: ${(props) => (props.$primary ? "white" : "blue")};
  padding: 8px 16px;
  border-radius: 4px;
`;

function App() {
  return <Button $primary>Click me</Button>;
}