Inline styles in React
📚 What are Inline Styles in React? In regular HTML you write style="color: red; font-size: 18px;" as a string. In React, the style prop takes a JavaScript OBJECT instead. This means you write camelCase property names (fontSize instead of font-size) and values as strings or numbers. React converts …
Appy Says…
Sometimes you need to apply a style that's calculated at runtime — a colour from user preferences, a width from a data value, a position from a drag event. Inline styles in React let you apply CSS directly as a JavaScript object.
What are Inline Styles in React?
React's style prop takes a JavaScript object — not a CSS string. Properties are camelCased, values are strings (or numbers for unitless properties).
- •
<div style={{ color: 'red', fontSize: '16px' }}> - •Note double braces: outer {} = JSX expression; inner {} = JavaScript object
- •camelCase:
backgroundColornotbackground-color - •Numbers without unit:
fontSize: 16= 16px (React adds px automatically) - •Dynamic:
style={{ width: progress + '%' }} - •Use sparingly — prefer CSS classes; inline styles can't use pseudo-selectors or media queries
Think of it like a Roblox BrickColor set in a script
You can set a part's colour statically in Studio (like a CSS class), or change it dynamically in a script: part.BrickColor = BrickColor.new('Bright red'). Inline styles are the script-driven approach — for values that change at runtime.
How It Works
- •1.
styleprop accepts a CSSProperties object in TypeScript - •2. Properties are camelCase JavaScript identifiers
- •3. String values:
'16px','#fff','flex' - •4. Number values (auto-px):
16→16px,1.5→ stays unitless for opacity etc. - •5. Dynamic:
style={{ height: isOpen ? 300 : 0, overflow: 'hidden' }} - •6. Merge with spread:
style={{ ...baseStyle, ...overrideStyle }}
Real-World Examples
- •Progress bar width:
style={{ width: `${percent}%` }} - •User-chosen accent colour:
style={{ color: user.accentColor }} - •Drag-and-drop position:
style={{ left: dragX, top: dragY, position: 'absolute' }} - •Animated height:
style={{ height: expanded ? contentHeight : 0, transition: 'height 0.3s' }}
Key Facts
- •Inline styles have the highest CSS specificity — they override all class-based styles
- •Cannot use pseudo-selectors (:hover, :focus) or @media queries in inline styles
- •CSS variables work in inline styles:
style={{ '--accent': color }} - •Tailwind + inline styles mix well: use Tailwind for static layout, inline for dynamic values
Watch Out!
Don't use inline styles for all your CSS — they're verbose, can't be cached by the browser, and can't use hover/media queries. Use them only for values that are truly dynamic (computed at runtime). For everything else, use CSS classes or utility classes like Tailwind.
Remember
style={{ camelCaseProp: 'value' }}. Use for dynamic runtime values only. Prefer Tailwind/CSS classes for static styles. Inline styles can't use pseudo-selectors.
What You Learned
- •Inline styles: style prop takes a JS object with camelCase properties
- •Dynamic values: compute in JS, pass as style object; numbers without unit auto-get px
- •Unlocks: runtime-computed styles, progress bars, drag positions, theme colour overrides
Key Facts
- →Inline styles have the highest CSS specificity — they override all class-based styles
- →Cannot use pseudo-selectors (:hover, :focus) or @media queries in inline styles
- →CSS variables work in inline styles:
style={{ '--accent': color }} - →Tailwind + inline styles mix well: use Tailwind for static layout, inline for dynamic values
Real-World Examples
Remember
style={{ camelCaseProp: 'value' }}. Use for dynamic runtime values only. Prefer Tailwind/CSS classes for static styles. Inline styles can't use pseudo-selectors.
Quick Quiz
React inline style is?