Travailler avec les styles CSS dans l'attribut style dans React

Dans les leçons précédentes, dans l'attribut style nous avons passé une variable contenant un objet avec des styles CSS. Il est possible de ne pas utiliser de variable intermédiaire et de décrire l'objet directement dans l'attribut - dans ce cas, nous avons besoin de deux paires d'accolades - la première pour l'insertion JSX et la seconde - pour l'objet.

Ainsi, prenons notre composant sans styles CSS :

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

Par exemple, définissons directement les propriétés CSS pour le premier paragraphe de notre composant React App :

App.js<p style = {{
  color: 'orangered',
  fontWeight: 'bold' }}>
  text
</p>

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

En conséquence, le code du composant ressemblera à ce qui suit :

App.jsfunction App() {
  return (
    <div style = {{
      width: '200px',
      border: '2px solid brown',
      padding: '10px',
      textAlign: 'center' }}>
      <p style={{
        color: 'orangered',
        fontWeight: 'bold' }}>
        text
      </p>
      <p style = {{
        fontStyle: 'brown',
        color: 'brown' }}>
        text
      </p>
      <p style = {{
        backgroundColor: 'orange',
        fontWeight: 'bold',
        color: 'white' }}>
        text
      </p>
    </div>
  );
}