Wie fügen Sie mehrere browserspezifische Werte in einen CSS-Stil in React ein?

Question

Dies ist vor allem Browser spezifische Werte wie diese für eine bestimmte CSS-Eigenschaft zu definieren:

<div style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">Grab me!</div> 

Wenn ich es so in Objekt wickeln:

<div style={{ 
    cursor: "-moz-grab", 
    cursor: "-webkit-grab", 
    cursor: "grab" 
}}>Grab me!</div> 

Sie dann Schlüssel in einem Objekt duplizieren (würde im strikten Modus fehlschlagen und würde sonst überschreiben). Und alle Werte in eine einzelne Zeichenfolge zu setzen, scheint auch nicht zu funktionieren.

Den Browser mit JS zu finden und dann den richtigen Wert anzuwenden, scheint zu viel Arbeit zu sein ... Oder gibt es einen anderen Ansatz, dies zu tun? Irgendwelche Ideen?

Answer 1

Wenn Sie Inline-Stile verwenden und auch Lieferantenpräfixe erhalten möchten, können Sie eine Bibliothek wie Radium verwenden, um den Lieferantenpräfix für Sie zu abstrahieren.

Durch Hinzufügen eines @Radium Dekorators zu Ihrer Komponente wird Radium die Stile, die Sie an die Komponente übergeben, automatisch verwalten und ihnen Präfixe zuweisen.

var Radium = require('radium'); 
var React = require('react'); 

@Radium 
class Grabby extends React.Component { 
    render() { 
    return (
     <div style={style}> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

var style = { 
    cursor: "grab" // this will get autoprefixed for you! 
}; 

Answer 2

Das Beste, was Sie tun können, ist eine CSS-Klasse mit dem Cursor-Attribut zu erstellen, und fügen Sie es zu Ihrer Komponente

.container { 
    height: 10px; 
    width: 10px; 
} 

.grab { 
    cursor: -moz-grab, 
    cursor: -webkit-grab, 
    cursor: grab, 
} 

Dann in Ihrer Komponente reagieren:

var isGrabEnabled = true; 

<div className={['container', (isGrabEnabled ? 'grab' : '')]}>Grab me!</div>