What limits React inline styles and when are they still appropriate?

WHAT THIS TESTS: This question evaluates whether you can articulate the engineering trade-offs between developer ergonomics and styling system capabilities in React at scale. Interviewers want to see that you understand inline styles are not just a syntax choice but a fundamental constraint on what CSS can express, and that you know when the convenience outweighs the limitations.

A GOOD ANSWER COVERS: First, enumerate the hard limitations: inline styles cannot express pseudo-classes like hover or focus, media queries, keyframe animations, or CSS custom properties in a clean way. Second, discuss maintainability and performance costs: as a codebase grows, scattering styles in JavaScript objects makes refactoring difficult, and forcing React to attach styles to individual DOM nodes is less efficient than browser-optimized stylesheets parsed once. Third, defend the legitimate use cases: dynamic values derived from props or state are trivial with inline styles; rapid prototyping benefits from colocation; critical above-the-fold styles can prevent FOUC by being present in the initial HTML; and very small presentational components may not justify a separate stylesheet.

COMMON WRONG ANSWERS: A red flag is claiming inline styles are universally an anti-pattern with no valid use case. Another is asserting they perform identically to class-based CSS, which ignores that inline styles bypass the browser's stylesheet caching and sharing mechanisms. Saying you can implement hover effects with inline styles alone is also a clear signal that you have not hit the limitation in production.

LIKELY FOLLOW-UPS: The interviewer may ask how you would animate an inline-styled component, which should lead to a discussion of CSS modules, CSS-in-JS libraries, or plain CSS classes. They might also ask how you prevent FOUC in a Next.js application, or how you would refactor a component that currently uses inline styles to support theming.

ONE CONCRETE EXAMPLE: Imagine a dashboard widget that changes background color based on a real-time severity prop. An inline style is ideal here because the color is purely dynamic data. However, the widget also needs a hover tooltip and a mobile layout shift. Those require pseudo-classes and media queries, so you would promote the layout and hover rules to a CSS Module while keeping the dynamic background color as an inline style, creating a clean hybrid approach.

Source: DEV Community, "Approaches to Styling React Components, Best Use Cases" by Anton Zamay