Insertion de données dans l'attribut style à partir d'un objet en React

Les styles CSS peuvent également être ajoutés aux éléments en utilisant l'attribut style. Dans cette leçon et dans les quelques suivantes, nous examinerons les méthodes de stylisation en ligne.

Maintenant, nous ne connecterons pas le fichier styles.css, mais nous transmettrons les valeurs correspondantes à l'attribut style sous la forme d'un objet contenant les styles pour chaque balise, que nous écrirons directement dans le fichier du composant.

Prenons donc notre composant sans styles CSS, que nous avons créé dans la leçon précédente :

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

Dans le fichier App.js, avant la commande return, créons un objet contenant les styles CSS pour la div dans la variable class1. Rappelez-vous que les noms des propriétés ici s'écrivent en notation camelCase, et les valeurs des propriétés doivent être mises entre guillemets :

App.jsconst class1 = {
  width: '200px',
  border: '2px solid brown',
  padding: '10px',
  textAlign: 'center'
};

Maintenant, ajoutons l'objet class2 avec les styles pour le premier paragraphe :

App.jsconst class2 = {
  color: 'orangered',
  fontWeight: 'bold'
}

L'objet class3 avec les styles pour le deuxième paragraphe :

App.jsconst class3 = {
  fontStyle: 'italic',
  color: 'brown',
}

Et enfin, class4 pour le dernier :

App.jsconst class4 = {
  backgroundColor: 'orange',
  fontWeight: 'bold',
  color: 'white',
}     

Maintenant, pour appliquer dans le composant les classes CSS, utilisons l'attribut style. Pour le premier paragraphe nous avions la variable class2, transmettons-la comme valeur :

App.js<p style={class2}>text</p>

Ajoutons de manière similaire les styles des objets pour les autres balises.

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

App.jsfunction App() {
  const class1 = {
    width: '200px',
    border: '2px solid brown',
    padding: '10px',
    textAlign: 'center',
  };

  const class2 = {
    color: 'orangered',
    fontWeight: 'bold',
  };

  const class3 = {
    fontStyle: 'italic',
    color: 'brown',
  };

  const class4 = {
    backgroundColor: 'orange',
    fontWeight: 'bold',
    color: 'white',
  };

  return (
    <div style={class1}>
      <p style={class2}>text</p>
      <p style={class3}>text</p>
      <p style={class4}>text</p>
    </div>
  );
}