style for dynamic values, CSS variables from props
The console shows the exact style attributes React wrote. The second meter's fill is orange although its JSX never mentions a background: the rule var(--meter-color) in the CSS tab read the variable. Hover a meter: the :hover rule still works because the colour lives in CSS.
React styles elements with two props: className, a string of CSS class names you build from state, and style, an object of inline styles for truly dynamic values; ordinary CSS files and CSS variables do the rest.
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.
Write a Badge component that takes tone ("info", "success" or "danger") and outline (boolean) and renders a <span> with classes badge, badge--<tone> and, when outline is true, badge--outline.
Write an Avatar component that takes size (a number) and ring (a colour) and renders a circle of that size whose border colour is set through a CSS variable --ring.
Explain it without notes
Why does JSX use className instead of class, and what happens if you write class?
When would you use the style prop instead of a class? Give two examples of each.
What does a helper like clsx do, and why do teams use it?
How do CSS variables help when a style must come from props but still needs :hover or a media query?
Preview
Console
Nothing logged yet.Expected console output
--meter-color: #0b7285;
width: 40%;
margin-top: 8px; opacity: 0.7; line-height: 1.4;
rgb(232, 89, 12)