Inline Styles in React — React Technical Interview Questions & Answers

Inline Styles in React

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.

Technical Interview Tip: Two braces + camelCase + when not to.

Code Examples for Inline Styles in React

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.

How to Explain Inline Styles in React to an Interviewer

Explain Inline Styles as if you are teaching a junior — definition, then one tiny UI.

style={{ camelCase: value }}. px.

What does the example show on screen (or print), and what does that prove?

Inline Styles in React — on screen: ₹199 in teal 18px

What mistake do freshers make with Inline Styles?

small dynamic bits.