Insertion de données dans l'attribut style à partir de variables dans React

Dans la leçon précédente, nous avons écrit l'objet directement dans l'attribut style. Nous pouvons également utiliser l'insertion de données dans cet objet à partir de variables.

Prenons notre composant React sans styles CSS :

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

Maintenant, nous allons créer des variables et leur assigner des valeurs de propriétés CSS. Commençons dans l'ordre avec les styles pour la div.

Dans le fichier du composant, avant la commande return, créons la variable wd1 et assignons-lui la valeur '200px' :

App.jsconst wd1 = '200px';

De la même manière, créons des variables pour toutes les valeurs des propriétés de notre div :

App.jsconst wd1 = '200px';
const br1 = '2px solid brown';
const pd1 = '10px';
const ta1 = 'center';

Maintenant, ajoutons des variables pour le premier paragraphe :

App.jsconst co1 = 'orangered';
const fw1 = 'bold';

Pour le deuxième paragraphe :

App.jsconst fs1 = 'italic';
const co2 = 'brown';

Et enfin, pour le dernier. Ici, seules deux variables seront nécessaires, et non trois. Cela n'a pas de sens de se répéter, puisque la valeur bold est déjà disponible pour le premier paragraphe :

App.jsconst bco1 = 'orange';
const co3 = 'white';

Et maintenant, nous allons substituer les variables avec les valeurs de styles. Faisons-le pour le premier paragraphe. Insérons les variables co1 et fw1 à la place des valeurs dans l'objet :

App.js<p style = {{ color: co1, fontWeight: fw1 }}>
  text
</p>

Nous procéderons de la même manière avec les autres balises.

En conséquence, le code de notre composant ressemblera à ceci :

App.jsfunction App() {

  //pour div :
  const wd1 = '200px';
  const br1 = '2px solid brown';
  const pd1 = '10px';
  const ta1 = 'center';

  //pour le premier p :
  const co1 = 'orangered';
  const fw1 = 'bold';

  //pour le deuxième p :
  const fs1 = 'italic';
  const co2 = 'brown';
  
  //pour le troisième p :
  const bco1 = 'orange';
  const co3 = 'white';

  return (
    <div style = {{
      width: wd1,
      border: br1,
      padding: pd1,
      textAlign: ta1 }}>
      <p style = {{ color: co1, fontWeight: fw1 }}>
        text
      </p>
      <p style = {{ fontStyle: fs1, color: co2 }}>
        text
      </p>
      <p style = {{ 
        backgroundColor: bco1,
        fontWeight: fw1,
        color: co3 }}>
        text
      </p>
    </div>
  );
}