print - llamar javascript desde html

Estilos CSS en línea en React: ¿cómo implementar consultas de medios?

Question

Me gusta bastante el patrón de CSS en línea ( video ) en React y estoy pensando en usarlo. Sin embargo, tengo una pregunta similar a esta .

¿Cómo se puede implementar consultas de medios para una aplicación usando el patrón de CSS en línea de React?

Answer 1

No puede hacer cosas como consultas de medios y pseudoelementos sin una hoja de estilo. Sin embargo, puede acceder a la información en la que están integrados en JavaScript. Por ejemplo, una implementación ingenua de un mixin de cambio de tamaño:

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

Luego puede incluir eso en su componente y tener un render que se vea así:

render: function(){
  var style;

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

No estoy seguro de que sea una buena idea, pero se puede hacer.

Por ''implementación ingenua'' me refiero a que tiene problemas de rendimiento. addEventListener es realmente bastante pesado, por lo que desea envolverlo en un simple emisor de eventos js. También puede tener solo una instancia del objeto de ventana para guardar algo de presión del GC. Y desea acelerar el evento porque los navegadores lo emitirán muy rápido al arrastrar la ventana.

Al igual que con todas las buenas abstracciones, puede realizar estas optimizaciones cuando tenga tiempo libre, y no necesita modificar los componentes que lo utilizan.

Answer 2

React-Responsive le permitirá utilizar un cierto caso de uso de consultas de medios.

Te permite envolver elementos de elementos de reacción con especificaciones de medios. Los elementos envueltos se mostrarán solo si se cumplen las especificaciones de medios. No es una solución de propósito general porque no permite agregar propiedades de CSS arbitrarias.

Answer 3

No puedes. Hay ciertas funciones de CSS, como @media queries, que se deben definir en un bloque de declaración en una hoja de estilo.

Si bien CSS en línea es ideal para la mayoría de los atributos de estilo que se pueden aplicar en pares clave-valor, no es un reemplazo completo para hojas de estilo dedicadas.

EDITAR:

Hay objetos experimentales disponibles en ciertos navegadores (Chrome 9+, IE 10+, Firefox 6+) que le permiten agregar detectores de eventos cuando cambian las consultas de medios en el documento, como MediaQueryList .

Hay un proyecto React incipiente llamado Radium que proporciona mixins para aplicar estilos condicionales en función de las consultas de medios activas, utilizando MediaQueryList bajo el capó.