Question Comment appliquer les préfixes de fournisseur aux styles en ligne dans reactjs?


Les propriétés CSS dans React ne sont pas ajoutées automatiquement avec leurs préfixes de fournisseur.

Par exemple, avec:

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

Dans Safari, la rotation ne serait pas appliquée.

Comment puis-je accomplir cela?


35
2017-08-19 16:01


origine


Réponses:


React n'applique pas automatiquement les préfixes du fournisseur.

Pour ajouter des préfixes de fournisseur, nommez le préfixe du fournisseur selon le modèle suivant et ajoutez-le en tant que support distinct:

-vendor-specific-prop: 'value'

devient:

VendorSpecificProp: 'value'

Ainsi, dans l'exemple de la question, il doit devenir:

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

Les préfixes de valeur ne peuvent pas être faits de cette manière. Par exemple, ce CSS:

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

Parce que les objets ne peuvent pas avoir de clés en double, cela ne peut être fait qu'en sachant lequel de ceux-ci le navigateur prend en charge.

Une alternative serait d'utiliser Radium pour la chaîne d'outils de styling. Une de ses fonctionnalités est le préfixage automatique du fournisseur.

Notre exemple en radium ressemble à ceci:

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

      // fallback
      'black',
    ]
  }
};

53
2017-08-19 16:01



Vous pouvez utiliser quelque chose comme ceci:

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

pour préfixer automatiquement les objets de votre style.


2
2017-08-19 23:25



En fait, j'ai rencontré le même problème et aucun des pré-bibliothèques ne réagissait. J'ai donc construit moi-même:

Pré-préfixe

C'est encore jeune (construit ce matin), mais je le maintiendrai. J'espère que ça aide.


1
2017-09-01 23:20



Je n'ai pas d'expérience avec react.js, mais regardez cette bibliothèque de Lea Verou. Il préfixe le style directement dans DOM.

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


0
2017-08-19 22:01