Build a tiny styled() with useInsertionEffect
Three buttons but only two <style> tags: Cancel and Help produce the same CSS text, so they share one class. The insertion effects ran before the layout effect, so it already measures the 16px padding. The $primary prop never reaches the DOM. There is no CSS for the buttons in the CSS tab: it was all generated in the browser.
CSS-in-JS libraries such as styled-components and Emotion let you write CSS inside JavaScript components and compute it from props; runtime versions generate and inject styles in the browser on every render, which costs time and clashes with Server Components, so newer zero-runtime tools extract the CSS at build time.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Using the mini styled() from the first example, create a Card (a div) whose border colour comes from a $tone prop ("info" → #1c7ed6, "warn" → #f59f00) and render one of each.
Rewrite Bar A from the second example so it keeps a single CSS rule however the width changes, without using CSS variables.
Explain it without notes
Describe step by step what a runtime CSS-in-JS library does when a styled component renders.
What is useInsertionEffect and why was it added?
Why does runtime CSS-in-JS conflict with React Server Components?
What is zero-runtime CSS-in-JS and what do you give up with it?
Preview
Console
Nothing logged yet.Expected console output
insert <style> for mini-myk4ct
insert <style> for mini-9qvyx9
layout effect sees padding: 16px
style tags: 2
<button class="mini-myk4ct">Save</button>