Styling React

The 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.