Style objects: camelCase keys, numbers become px
Compare what you wrote with what React put in the page: width: 210 became 210px, opacity and lineHeight kept their plain numbers, backgroundColor became background-color, and --accent kept its name. Change progress to 30 and watch the colour switch.
In JSX the style attribute takes a JavaScript object with camelCase property names (numbers become pixels for most properties), and className takes a string you can build from conditions to switch CSS classes on and off.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a Swatch component that takes a color prop and shows a 40×40 square of that colour with rounded corners, using a style object.
Make a Button that gets the class btn, plus btn-primary when primary is true and btn-disabled when disabled is true.
Explain it without notes
How is the style attribute in JSX different from HTML's?
When does React add px to a number in a style object?
Show two ways to add a class only when a condition is true.
When would you choose an inline style over a class?
Preview
Console
Nothing logged yet.Expected console output
--accent: #087ea4; line-height: 1.5;
width: 210px; height: 18px; background-color: rgb(47, 158, 68); border-radius: 999px; opacity: 0.9; transition: width 0.3s;
font-size: 14px; margin-top: 6px; color: var(--accent);