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.

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

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.

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

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

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.