Come si applicano i prefissi dei fornitori agli stili inline in reactjs?

Question

Le proprietà CSS in React non vengono aggiunte automaticamente con i relativi prefissi del fornitore.

Ad esempio, con:

<div style={{ 
    transform: 'rotate(90deg)' 
}}>Hello World</div> 

In Safari, la rotazione non sarebbe applicato.

Come ottengo quello compiuto?

Answer 1

React non applica automaticamente i prefissi del fornitore.

Per aggiungere prefissi fornitore, il nome il prefisso fornitore secondo il seguente schema, e aggiungerlo come un oggetto di scena separata:

-vendor-specific-prop: 'value' 

diventa:

VendorSpecificProp: 'value' 

Così, nell'esempio nella domanda, deve diventare:

<div style={{ 
    transform: 'rotate(90deg)', 
    WebkitTransform: 'rotate(90deg)' 
}}>Hello World</div> 

I prefissi dei valori non possono essere eseguiti in questo modo. Ad esempio questo CSS:

background: black; 
background: -webkit-linear-gradient(90deg, black, #111); 
background: linear-gradient(90deg, black, #111); 

Poiché gli oggetti non possono avere chiavi duplicate, questo può essere fatto solo sapendo quale di questi browser supporta.

Un'alternativa sarebbe quella di utilizzare Radium per la toolchain di stile. Una delle sue caratteristiche è il prefisso automatico del venditore.

Il nostro esempio di sfondo in radio assomiglia a questo:

var styles = { 
    thing: { 
    background: [ 
     'linear-gradient(90deg, black, #111)', 

     // fallback 
     'black', 
    ] 
    } 
}; 

Answer 2

Non ho esperienza con react.js, ma guardo a questo js libreria da Lea Verou. Prefigge lo stile diretto in DOM.

http://leaverou.github.io/prefixfree/

Answer 3

Si può usare qualcosa di simile:

https://github.com/cgarvis/react-vendor-prefix

agli oggetti in stile vendor-prefix automaticamente.

Answer 4

In realtà ho affrontato lo stesso problema, e nessuna delle librerie di prefisso di risposta là fuori ha fatto il lavoro che volevo. Così ho costruito uno io:

react-prefixer

E 'ancora piuttosto giovane (costruito questa mattina), ma sarò il suo mantenimento. Speriamo che aiuti.