Lesson 9 of 30
30%
Styling Components
React does not force one CSS style. You can use files, inline styles, CSS modules, or a library.
Start with className and a CSS file. Add the rest when the project needs it.
className and a CSS file
javascript
javascript
Multiple classes
Join them with a space. A tiny helper keeps the line readable.
javascript
Inline styles
The style prop takes an object, not a CSS string.
Keys are camelCase: backgroundColor, not background-color.
javascript
Inline styles are handy for values that come from data, like a width percent.
For hover and media queries, a stylesheet is easier.
CSS modules, in one picture
A file named Box.module.css gives you unique class names so two Box files cannot clash.
javascript
Tip: FoxSchools uses styled-components. The idea is the same: a component owns its look. Learn className first.
Test yourself
Three quick questions made just for this lesson. Earn 10 XP per correct answer.