Une méthode simple pour appliquer des styles dans React consiste à utiliser les styles en ligne, de manière similaire à l'ajout de styles aux éléments HTML via l'attribut style.

La principale différence est que, dans React, la valeur de l'attribut style est un objet JavaScript, et non une chaîne CSS.

Voici un exemple d'application de styles en ligne directement dans le JSX :

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

Dans cet exemple, l'élément h1 reçoit des styles via l'attribut style, qui contient un objet JavaScript.

Règles importantes pour les styles en ligne

Lors de l'utilisation de styles en ligne dans React, il convient de respecter les règles suivantes :

• Les noms de propriétés CSS composés de deux mots ou plus doivent utiliser la notation camelCase
  • font-weight → fontWeight;
  • background-color → backgroundColor.
• Les valeurs sont généralement écrites sous forme de chaînes : "32px", "red", "rebeccapurple";
• Certaines propriétés peuvent accepter directement des nombres : fontWeight: 700.

Ces règles existent car les styles en ligne sont écrits en JavaScript, et non en CSS classique.

Styles en ligne comme objet séparé

Pour rendre le JSX plus lisible et organisé, il est possible de stocker les styles en ligne dans un objet JavaScript séparé, puis de le passer à l'attribut style.

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

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

Quand utiliser les styles en ligne

Les styles en ligne sont les plus adaptés pour :

• Petits composants ;
• Styles dynamiques ;
• Ajustements visuels rapides.

Ils ne conviennent pas aux grandes mises en page ou aux styles complexes, c’est pourquoi le CSS externe est souvent privilégié.