Celebrating a Decade of styled-components
We're so back! A retrospective on the past decade of styled-components and where we're headed.
Articles, tutorials, and announcements from the styled-components community. Originally published on Medium.
Lessons from building Sprout Social's Seeds design system — how great tooling, documentation, and developer empathy create component libraries people actually want to use.
styled-components v5 delivers 50% faster server-side rendering, 22% smaller bundles, and RTL support with no breaking changes.
How Styled System brings constraint-based design to React component libraries, making it easier to build consistent, responsive UIs with props instead of custom CSS.
The styled-components css prop now works out of the box with Create React App, no eject or babel config needed.
Introducing first-class support for the css prop in styled-components, enabling inline styling with full theming and interpolation support.
styled-components v4 is officially stable after beta testing, bringing a smaller bundle, the new createGlobalStyle API, and full React 16 StrictMode compliance.
A deep dive into styled-components v4: a brand new global styles API, native "as" prop support, .extend removal, and full React v16 StrictMode compliance.
A technical deep dive into how styled-components processes tagged template literals, generates CSS, and injects styles into the DOM.
A hands-on tutorial building a HackerNews feed clone to learn the fundamentals of styled-components, from basic components to the attrs helper.
A beginner-friendly walkthrough of styling a Create React App project with styled-components, covering theming, global styles, and component extension.
v3.1.0 introduces insertRule-based CSS injection for up to 10-20x faster rendering in production, plus streaming server-side rendering support for React 16.
A practical guide to incrementally migrating Sass-based apps to styled-components using ThemeProvider and the sass-extract toolchain.
Build a declarative responsive component system in just 18 lines of code using styled-components and JavaScript's reduce function.
A step-by-step tutorial for building a universal blog application with Next.js, styled-components, and Express.
Learn to build a responsive 12-column grid system from scratch using styled-components and CSS media queries, no framework required.
styled-components v2 ships with a 45% smaller bundle, best-in-class server-side rendering, and new API helpers like .attrs, .extend, and .withComponent.