web-dev-qa-db-fra.com

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 que cela soit accompli?

css3reactjsvendor-prefix
46
zealoushacker

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

Pour ajouter des préfixes de fournisseur, nommez-le comme suit et ajoutez-le séparément.

-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 créés de cette façon. Par exemple ce CSS:

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

Étant donné que les objets ne peuvent pas avoir de clés en double, vous ne pouvez le faire qu'en sachant laquelle de celles-ci le navigateur prend en charge.

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

Notre exemple de fond en radium ressemble à ceci:

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

      // fallback
      'black',
    ]
  }
};
72
zealoushacker

Vous pouvez utiliser quelque chose comme ceci:

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

de préfixer automatiquement vos objets de style.

1
fabio.sussetto

En fait, je suis confronté au même problème et aucune des bibliothèques qui préfixent n’a fait le travail que je voulais. Alors j'en ai construit un moi-même:

react-prefixer

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

0
tquetano-r7

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

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

0
Samuell