Comment appliquer un style en ligne en JSX ?

Pour appliquer un style en ligne en JSX, on utilise un objet JavaScript pour définir les styles. Dans cet objet, les noms de propriétés CSS sont écrits en camelCase (au lieu de tirets comme en CSS normal), et les valeurs sont passées sous forme de chaînes de caractères (pour les valeurs mesurées) ou directement sous forme de valeurs numériques, sans guillemets, pour les valeurs unitaires (par exemple, width: 100).

Dans le cas de la question, le bon moyen d'écrire un style en ligne qui spécifie font-size:12px et color:red; en JSX serait comme ceci : style={{fontSize:'12px',color:'red'}}.

Notez que fontSize est écrit en camelCase au lieu de font-size comme on le ferait en CSS standard. De plus, 12px est une valeur mesurée et est donc transmise comme une chaîne de caractères.

Voici un exemple pratique d'application dans un bloc de code :

function MonComponent() {
  return (
    <div style={{fontSize: "12px", color: "red"}}>
      Mon texte stylisé
    </div>
  );
}

Dans cet exemple, MonComponent retourne une div qui contient un texte de style font-size:12px et color:red;if you're starting a real house-remodeling.

En guise de bonnes pratiques supplémentaires, il est recommandé d'éviter l'utilisation excessive de styles inline pour des raisons de performance et de maintenabilité du code. Si possible, utiliser des feuilles de style en cascade (CSS) ou des modules CSS, ce qui permet également de profiter de la puissance de l'héritage et de la cascade des styles CSS.