Ein unkomplizierter, jedoch etwas eingeschränkter Ansatz zur Stilzuweisung ist die Verwendung von Inline-Styles, ähnlich wie bei der Anwendung von Styles auf HTML-Elemente mit dem style-Attribut. In React besteht der einzige Unterschied darin, dass der Wert dieses Attributs ein Objekt und kein String ist. Im Folgenden werden die Details erläutert.

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-Styles, die über das style-Attribut definiert werden. Zu den wichtigsten Punkten im Zusammenhang mit Inline-Styles gehören:

• Eigenschaftsnamen mit zwei oder mehr Wörtern sollten der Camel-Case-Notation (camelCase) folgen. Anstelle der CSS-Eigenschaft font-weight wird beispielsweise fontWeight verwendet;
• Bei der Zuweisung von Werten zu CSS-Eigenschaften werden in der Regel Strings verwendet, mit Ausnahme von Eigenschaften, die reine Zahlen erwarten. Daher erhält die Eigenschaft fontWeight den Wert als Zahl (700), während die Eigenschaft fontSize einen String-Wert (32px) verwendet.

Inline-Styles in Form eines separaten Objekts

Um unseren JSX-Code übersichtlich und fokussiert zu halten, können die Inline-Styles als separates JavaScript-Objekt definiert und anschließend diesem Objekt dem style-Attribut zugewiesen werden. 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 wird das appStyles-Objekt eingeführt, das die gleichen Styles wie zuvor enthält, jedoch nun als separates Objekt. Diese Trennung der Verantwortlichkeiten erhöht die Übersichtlichkeit des Komponenten-Codes.