javascript - Inline CSS styles in React: how to implement media queries?

Question

I quite like the inline CSS pattern (video) in React and i am thinking about using it. However i have a question similar to this one.

How does one go about implementing media queries for an application using React's inline CSS pattern.

Answer 1

You can't. There are certain CSS features, like @media queries, that must be defined in a declaration block in a stylesheet.

While inline CSS is great for most styling attributes that can be applied in key-value pairs, it isn't a complete replacement for dedicated stylesheets.

EDIT:

There are experimental objects available in certain browsers (Chrome 9+, IE 10+, Firefox 6+) that allow you to add event listeners when media queries on the document change, such as MediaQueryList.

There is a nascent React project called Radium that provides mixins for applying conditional styling based on the active media queries, using MediaQueryList under the hood.