styled-components

styled-components is a CSS-in-JS library that enables writing CSS directly within JavaScript using tagged template literals, creating React components with styles attached. Each styled component generates unique class names automatically, providing true style encapsulation without global CSS conflicts. The API is intuitive: const Button = styled.button`background: blue; color: white; padding: 8px 16px;` creates a React component with those styles. styled-components supports dynamic styling based on props (${props => props.primary ? 'blue' : 'gray'}), theming through a ThemeProvider context, global styles through createGlobalStyle, CSS animations via keyframes helper, and extending existing styled components. The library handles vendor prefixing automatically, supports server-side rendering with ServerStyleSheet for critical CSS extraction, and provides a Babel plugin for better debugging class names and smaller bundles. styled-components attaches styles to the DOM only when components are rendered, enabling code splitting of styles alongside component code. While the CSS-in-JS approach has faced criticism for runtime performance overhead compared to utility CSS (Tailwind) or CSS Modules, styled-components remains widely used for its developer experience and component-centric styling model.