Une approche simple mais quelque peu limitée pour ajouter des styles consiste à utiliser les styles en ligne, similaires à la façon dont nous appliquons des styles aux éléments HTML en utilisant l'attribut style. Dans React, la seule différence est que la valeur de cet attribut est un objet, et non une chaîne de caractères. Plongeons dans les détails.

const App = () => (
  <>
    <h1
      style={{
        fontWeight: 700,
        fontSize: "32px",
        color: "rebeccapurple",
      }}
    >
      App title
    </h1>
  </>
);

Le composant App dans l'exemple ci-dessus inclut un élément h1 avec des styles en ligne définis à l'aide de l'attribut style. Voici quelques points clés à retenir concernant les styles en ligne :

• Les noms de propriétés comportant deux mots ou plus doivent suivre la notation camel case (camelCase). Par exemple, au lieu d'utiliser la propriété CSS font-weight, nous devrions utiliser fontWeight;
• Lors de l'attribution de valeurs aux propriétés CSS, nous utilisons généralement des chaînes de caractères, sauf pour les propriétés qui attendent des nombres simples. C'est pourquoi la propriété fontWeight utilise un nombre (700) comme valeur, tandis que la propriété fontSize utilise une valeur de chaîne (32px).

Styles en ligne sous la forme d'un objet séparé

Pour garder notre code JSX propre et concentré, nous pouvons définir les styles en ligne comme un objet JavaScript séparé, puis attribuer cet objet à l'attribut style. Cette approche améliore la maintenabilité et la lisibilité de nos composants.

const appStyles = {
  fontWeight: 700,
  fontSize: "32px",
  color: "rebeccapurple",
};

const App = () => (
  <>
    <h1 style={appStyles}>App title</h1>
  </>
);

Dans cet exemple, nous introduisons l'objet appStyles, représentant les mêmes styles utilisés précédemment mais maintenant sous la forme d'un objet séparé. Cette séparation des préoccupations améliore la clarté de notre code de composant.