Guided Notes
Styling React
Inline styles, stylesheets and className, conditional classes, CSS Modules, CSS-in-JS, and Sass.
Inline styles
Slide 1 / 5The style prop takes a JavaScript object. Property names are camelCase; values are strings, or numbers for pixels:
<div style={{ backgroundColor: "navy", color: "white", padding: 12 }}>
Styles can be computed from props or state:
const barStyle = { width: percent + "%" }; <div className="bar" style={barStyle} />
Inline styles suit truly dynamic values (a progress width, a user-chosen color). They can't do :hover, media queries, or animations — use CSS for those.