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

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.

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][1].

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

[1]: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList "MediaQueryList" [2]: http://projects.formidablelabs.com/radium/

You can't do things like media queries and pseudo elements without a stylesheet. You can, however, access the information they're built on in JavaScript. For example, a naive implementation of a resize mixin:

var ResizeMixin = {
    componentDidMount: function(){
        window.addEventListener('resize', this._resize_mixin_callback);
    },
    _resize_mixin_callback: function(){
        this.setState({
            viewport: {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        });
    },
    componentWillUnmount: function(){
        window.removeEventListener('resize', this._resize_mixin_callback);
    }
};

You could then include that in your component, and have a render that looks like this:

render: function(){
  var style;

  if (this.state.viewport.width > 900) {
    style = {width: '45%', margin: '2.5%'};
  }
  else {
    style = {width: '100%', margin: '0'};
  }
  ...
}

I'm not sure this is a good idea, but it can be done.

---

By 'naive implementation' I mean it has performance problems. addEventListener is actually pretty heavy, so you want to wrap that in a simple js event emitter. You can also have only one instance of the viewport object to save some GC pressure. And you want to throttle the event because browsers will emit it very fast when dragging the window.

As with all good abstractions, you can make these optimizations when you have spare time, and you don't need to modify the components using it.

React-Responsive will let you use a certain use-case of media queries.

It lets you wrap react element elements with media specifications. The wrapped elements will be rendered only if they media specification is met. It's not a general-purpose solution because it doesn't let you add arbitrary css properties.

Im late to the party but I still hope that I can help. You can use a "useMediaQuery" hook (https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/src/useMediaQuery.js) and then apply inline styles dynamically if the hook returns true.

You can use media queries with the radium package by simply importing it and also using the StyleRoot component.

import Radium, { StyleRoot } from 'radium';

However keep it in mind, you can not use media queries directly under StyleRoot

, you will have to put the contents of StyleRoot on a separate component

Worked for me below handy steps:

1. set a class for your desire item in media css file, for example

   @media (max-width: 768px){
   .sidebar-show{
       display: block;
    }
    .sidebar-hide{
       display: none;
    }}
   

2. conditional rendering in your react, for example:(showSideBar is state variable for example)

   <aside className={`col-md-3 ${showSideBar?"sidebar-show":"sidebar-hide"}`}>