Styled Components, SSR, and Theming
summary
Styled-components v2 with Next.js actually extracts and injects critical CSS on the server using Next.js SSR with ServerStyleSheet, so pages render styled immediately even with JavaScript disabled; a demo app (a Sean Bean death list) proves the approach and the server-rendered page stops waiting for CSS that formerly showed up ~400ms later. Theming uses ThemeProvider and a time-based theme for accessibility fed through React context, polished is used for color math, and the demos are open source and working.
AI-written summary · about
chapters (19)
- 0:00Intro
- 2:05CSS to HTML
- 2:50About Kasia
- 4:10Do I really need this
- 5:04CSS
- 6:00Advantages of Styled Components
- 7:38Theming
- 8:11Disclaimer
- 8:40Important
- 9:38Global vs Local
- 11:04Styling
- 12:09Plain CSS
- 12:40Simple People
- 14:27Underlying Class
- 14:47What Can Go Wrong
- 15:18Specificity Problem
- 20:54Theme Provider
- 22:02Demo
- 28:16Whats more
related talks
30mDynamic Styling Systems with React
30mStyled-components: Styled-components Enforcing best practices
22mStyled Components
30m50 shades of React rendering with Next.js
04mThe Road to Styled Components
07mReact Components and How To Style Them
12mReact Server Components and SSR: How it Fits
29mThe Lonely and Dark Road to Styling in React