React · Theory

Inline Styles in React

Theory

53/94

Inline Styles in React

Inline styles are a JS object: style={{ color: 'teal', fontSize: 18 }}. CamelCase properties. A number means px (except unitless ones like fontWeight). Two braces: outer JSX expression, inner object.

Good for tiny dynamic values (width from state). Bad for hover, media queries, theming a whole app. Don’t build a design system out of inline styles.

Inline Styles in React — on screen — ₹199 in teal 18px. fontSize not font-size. 18 means 18px.

Exam tip

Two braces + camelCase + when not to.

Example

// Inline style
export default function Price() {
  return <strong style={{ color: "teal", fontSize: 18 }}>₹199</strong>;
}

Inline Styles in React — on screen: ₹199 in teal 18px. fontSize not font-size. 18 means 18px.

Short notes

Defstyle={{ camelCase: value }}.
Number : px.
Usesmall dynamic bits.

React · Theory

Inline Styles in React

← All stacks

Theory

53/94

Inline Styles in React

Inline styles are a JS object: style={{ color: 'teal', fontSize: 18 }}. CamelCase properties. A number means px (except unitless ones like fontWeight). Two braces: outer JSX expression, inner object.

Good for tiny dynamic values (width from state). Bad for hover, media queries, theming a whole app. Don’t build a design system out of inline styles.

Inline Styles in React — on screen — ₹199 in teal 18px. fontSize not font-size. 18 means 18px.

Exam tip

Two braces + camelCase + when not to.

Example

// Inline style
export default function Price() {
  return <strong style={{ color: "teal", fontSize: 18 }}>₹199</strong>;
}

Inline Styles in React — on screen: ₹199 in teal 18px. fontSize not font-size. 18 means 18px.

Short notes

Defstyle={{ camelCase: value }}.
Number : px.
Usesmall dynamic bits.

Inline Styles in React

Example

Short notes

Questions

Inline Styles in React

Example

Short notes

Questions