Встроенные стили CSS в React: как реализовать медиа-запросы?

Ответ 1

Вы не можете. Существуют определенные функции CSS, такие как @media запросы, которые должны быть определены в блоке объявлений в таблице стилей.

В то время как встроенный CSS отлично подходит для большинства атрибутов стиля, которые могут применяться в парах ключ-значение, это не полная замена выделенных таблиц стилей.

EDIT:

В некоторых браузерах доступны экспериментальные объекты (Chrome 9+, IE 10+, Firefox 6+), которые позволяют добавлять прослушиватели событий, когда медиа-запросы при изменении документа, такие как MediaQueryList.

Существует зарождающийся проект React под названием Radium, который предоставляет микшины для применения условного стиля на основе активных запросов к медиа, используя MediaQueryList под капотом.

Ответ 2

Вы не можете делать такие вещи, как медиа-запросы и псевдоэлементы без таблицы стилей. Тем не менее, вы можете получить доступ к информации, на которой они встроены в JavaScript. Например, наивная реализация изменения размера:

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);
    }
};

Затем вы можете включить это в свой компонент и иметь рендер, который выглядит следующим образом:

render: function(){
  var style;

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

Я не уверен, что это хорошая идея, но это можно сделать.

В "наивной реализации" я имею в виду, что у него проблемы с производительностью. addEventListener на самом деле довольно тяжелый, поэтому вы хотите обернуть это в простой js event emitter. Вы также можете иметь только один экземпляр объекта viewport для сохранения некоторого давления в GC. И вы хотите заблокировать событие, потому что браузеры будут очень быстро выделять его при перетаскивании окна.

Как и во всех хороших абстракциях, вы можете сделать эти оптимизации, когда у вас есть свободное время, и вам не нужно изменять компоненты, используя его.

Ответ 3

React-Responsive позволит вам использовать определенный вариант использования медиа-запросов.

Это позволяет обернуть элементы реагирующих элементов спецификациями носителя. Обернутые элементы будут отображаться, только если они соответствуют спецификациям медиа. Это не универсальное решение, потому что оно не позволяет добавлять произвольные свойства CSS.