Inline Styling
-
This lesson introduces inline styling in React and explains how to apply dynamic styles directly inside JSX.
Inline Styling
Inline Style Syntax
Inline styles are written as JavaScript objects.
Example:
const style = {
color: "white",
backgroundColor: "black"
};
<h1 style={style}>Hello</h1>
Rules:
camelCase property names
values as strings or numbers
Dynamic Styles
Inline styles are useful for dynamic styling.
Example:
<h1 style={{ color: isActive ? "green" : "red" }}>
Status
</h1>
- Styles change based on state or props.