no puedes Hay ciertas características de CSS, como consultas @media , que deben definirse en un bloque de declaración en una hoja de estilo.

Si bien el CSS en línea es excelente para la mayoría de los atributos de estilo que se pueden aplicar en pares clave-valor, no es un reemplazo completo para las 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 sobre el documento, como MediaQueryList .

Hay un proyecto de React naciente llamado Radium que proporciona mezclas para aplicar estilos condicionales basados en las consultas de medios activas, utilizando MediaQueryList bajo el capó.

No puede hacer cosas como consultas de medios y pseudo elementos sin una hoja de estilo. Sin embargo, puede acceder a la información en la que están construidos 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 podría incluir eso en su componente y tener un renderizado 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 en realidad es bastante pesado, por lo que desea envolver eso en un emisor de eventos js simple. También puede tener solo una instancia del objeto de ventana gráfica para ahorrar algo de presión en el 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 las utilizan.

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

Le permite envolver elementos de elementos de reacción con especificaciones de medios. Los elementos envueltos se renderizarán solo si se cumple la especificación de medios. No es una solución de propósito general porque no le permite agregar propiedades css arbitrarias.