Inline-Stile

Ein einfacher, aber etwas eingeschränkter Ansatz zum Hinzufügen von Stilen ist die Verwendung von Inline-Stilen, ähnlich wie wir Stile auf HTML-Elemente mit dem style-Attribut anwenden. In React besteht der einzige Unterschied darin, dass der Wert für dieses Attribut ein Objekt und kein String ist. Lassen Sie uns in die Details eintauchen.

jsx
Code kopieren

Die App-Komponente im obigen Beispiel enthält ein h1-Element mit Inline-Stilen, die mit dem style-Attribut definiert sind. Hier sind einige wichtige Punkte, die Sie über Inline-Stile beachten sollten:

• Eigenschaftsnamen mit zwei oder mehr Wörtern sollten der CamelCase-Notation (camelCase) folgen. Anstatt beispielsweise die CSS-Eigenschaft font-weight zu verwenden, sollten wir fontWeight verwenden;
• Beim Zuweisen von Werten zu CSS-Eigenschaften verwenden wir im Allgemeinen Strings, außer für Eigenschaften, die einfache Zahlen erwarten. Aus diesem Grund verwendet die fontWeight-Eigenschaft eine Zahl (700) als Wert, während die fontSize-Eigenschaft einen String-Wert (32px) verwendet.

Inline-Stile in Form eines separaten Objekts

Um unseren JSX-Code sauber und fokussiert zu halten, können wir die Inline-Stile als separates JavaScript-Objekt definieren und dieses Objekt dann dem style-Attribut zuweisen. Dieser Ansatz verbessert die Wartbarkeit und Lesbarkeit unserer Komponenten.

jsx
Code kopieren

In diesem Beispiel führen wir das appStyles-Objekt ein, das dieselben zuvor verwendeten Stile darstellt, jetzt jedoch als separates Objekt. Diese Trennung der Anliegen verbessert die Klarheit unseres Komponenten-Codes.