CSS-in-JS: styled-components and Emotion

Write styles in JavaScript tied to React components, with props-based theming.

Intermediate

const Button = styled.button`background: ${(p) => p.theme.brand}; padding: 0.5rem 1rem;`;

Adds runtime cost; many teams now prefer CSS Modules, Tailwind or zero-runtime tools.

Spotted a mistake or want to add detail? Suggest an improvement — Content Contributors' edits are reviewed by editors before they go live.

Discussion (0)