Menu
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.
690
Generally, one can not do inline styling with media queries because React doesn't allow us to use media queries in inline styling. We can use radium which is a third-party package that enables media queries for inline styling.
It is not possible to use CSS @media rules and media queries in the inline style attribute as it can only contain property: value pairs. According to the W3 specification, the style attribute's value should match the syntax of contents of a CSS declaration block.
Can Media Query Override Inline? In most cases, inline styles can be overridden with media queries. As a matter of fact, your mind will likely be on how the cascade decides what style to render based on CSS rules.
React supports both inline and raw CSS by using a stylesheet file that can be achieved using various pre-processors like SCSS, CSS, SASS, and many more.
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.
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
