Stili CSS in linea in React: come implementare le query multimediali?

Question

Mi piace molto lo inline CSS pattern (video) in React e sto pensando di usarlo. Tuttavia ho una domanda simile a this one.

Come si fa a implementare le query multimediali per un'applicazione utilizzando il modello CSS in linea di React.

Answer 1

Non è possibile. Esistono alcune funzionalità CSS, come le query @media, che devono essere definite in un foglio di stile declaration block.

Mentre il CSS in linea è ottimo per la maggior parte degli attributi di stile che possono essere applicati nelle coppie chiave-valore, non è un sostituto completo per fogli di stile dedicati.

EDIT:

Ci sono oggetti sperimentali disponibili in alcuni browser (Chrome 9+, 10+ IE, Firefox 6+) che consentono di aggiungere listener di eventi in cui le media query sul cambiamento del documento, come ad esempio MediaQueryList.

C'è un nascente progetto React chiamato Radium che fornisce i mixaggi per applicare lo stile condizionale basato sulle query multimediali attive, utilizzando MediaQueryList sotto il cofano.

Answer 2

Non è possibile eseguire operazioni come query multimediali e pseudo elementi senza un foglio di stile. Tuttavia, puoi accedere alle informazioni su cui sono basate su JavaScript. Ad esempio, un'implementazione ingenuo di un mixin ridimensionamento:

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

Si potrebbe quindi includere che nel componente, e hanno un rendering che assomiglia a questo:

render: function(){ 
    var style; 

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

io non sono sicuro che questo è una buona idea, ma può essere fatta.

---

Con "implementazione ingenua" intendo che ha problemi di prestazioni. addEventListener è in realtà piuttosto pesante, quindi si desidera avvolgerlo in un semplice emettitore di eventi js. È anche possibile avere una sola istanza dell'oggetto viewport per salvare la pressione del GC. E tu vuoi limitare l'evento perché i browser lo emetteranno molto velocemente durante il trascinamento della finestra.

Come con tutte le buone astrazioni, è possibile effettuare queste ottimizzazioni quando si ha del tempo libero e non è necessario modificare i componenti che lo utilizzano.

Answer 3

This library consente di utilizzare un determinato caso di utilizzo di query multimediali.

Consente di avvolgere elementi elementi reattivi con specifiche dei supporti. Gli elementi avvolti verranno renderizzati solo se vengono soddisfatte le specifiche dei supporti. Non è una soluzione generica perché non consente di aggiungere proprietà arbitrarie di CSS.