Styled-components – Use the best of ES6 to style React apps
CSS for the <Component> Age
Styled-components – Use the best of ES6 to style React apps launched on October 13, 2016 with 172 votes, #155 of 3,690 launches that month and more than 95% of that year's launches. The site was still online in September 2026, 10 years on.
In plain words
Styled-components is a library that enables developers to write CSS directly within JavaScript for React applications, using ES6 template literals. It allows styles to be scoped to individual components, eliminating naming conflicts and making stylesheets dynamic. Developers can use JavaScript variables and logic within their styles, creating responsive and themeable user interfaces. The tool is designed for React developers who want to keep styling code closely integrated with their component logic.
written from the facts on this page · September 2026
From the sources
/* Edit me! This renders the buttons on the left. */ const Button = styled . a ` --bg : transparent ; --fg : ${ theme . color . text } ; --border : ${ theme . color . borderStrong } ; --shadow : transparent ; background : var ( --bg ) ; color : var ( --fg ) ; border : 1 px solid var ( --border ) ; border-radius : 3 px ; display : inline-block ; margin : 0.5 rem 0 ; padding : 0.5 rem 1 rem ; font-weight : 600 ; text-align : center ; transition : all 200 ms ease-in-out ; & :hover { --fg : ${ theme . color . accent } ; --border : ${ theme . color . accent } ; box-shadow : 0 4 px 12 px var ( --shadow ) ; } & :active { scale : 0.97 ; box-shadow : none ; } ` ; const PrimaryButton = styled (…from styled-components.com
Does a similar job
all alternatives →
Polished – A lightweight toolset for writing styles in JavaScript2017 · github.com · ▲106A lightweight toolset for writing styles in JavaScript ✨ - styled-components/polished
- UGUse Go's HTML/template to write React-like code2024 · ▲106
Hi all, I'm currently working on my hobby project, and one of the fun constraints I put in was to build using as less dependencies as possible. I chose Go as it has a really good standard library, and all went well for building backend. But for frontend, I was wondering whether I should break the constraint and go for React. I tried options like Web Components, but I really didn't like the ergonomics and I didn't want to use jQuery either. Out of curiosity, I was exploring Go's html/template package to see if I can write UIs in a React-like manner. I found most of the online docs using…
More life & fun this month
the category →
A free city-building game in your browser. You are the mayor. You know what the city needs. Now get it past the zoning board, the neighbors, the appeals court and the next election.
Life & fun · 21h ago · permit.petercai.com
- IV
Life & fun · 13d ago · tanzaniaeducationproject.org
Turn a phone, tablet or TV into a sign. Type a message and it fills the screen: welcome signs, timers, Wi-Fi passwords and more. No app, no account, free.
Life & fun · 14d ago · bigwords.page
Play a free virtual guitar online with your keyboard or by touch. Slow songs down and see every chord, string and strum. Acoustic, classic, electric and bass.
Life & fun · 8d ago · guitoro.com
Carrier settings from iPhone, Pixel and Galaxy firmware, decoded and compared: APNs, VoLTE, 5G and Wi-Fi Calling per carrier, and what each build changed.
Life & fun · 12d ago · carrierexplode.com
Life & fun · 22d ago · space.bl2.net
Source: Show HN post ↗
Launched alongside, October 2016
the whole month →
Without your consent most major web platforms leak whether you are logged in. This allows any website to detect on which platforms you
Growth · 2016 · robinlinus.github.io
Surface Studio▲832A brilliant screen for your ideas, from Microsoft
Life & fun · 2016 · microsoft.com
