Eine einfache Möglichkeit, in React Stile anzuwenden, ist die Verwendung von Inline-Styles, ähnlich wie Stile zu HTML-Elementen mit dem style-Attribut hinzugefügt werden.

Der entscheidende Unterschied besteht darin, dass in React der Wert des style-Attributs ein JavaScript-Objekt ist und kein CSS-String.

Hier ein Beispiel für die Anwendung von Inline-Styles direkt im JSX:

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

In diesem Beispiel erhält das h1-Element Stile über das style-Attribut, das ein JavaScript-Objekt enthält.

Wichtige Regeln für Inline-Styles

Beim Einsatz von Inline-Styles in React sind folgende Regeln zu beachten:

• CSS-Eigenschaftsnamen mit zwei oder mehr Wörtern müssen im camelCase-Format geschrieben werden
  • font-weight → fontWeight;
  • background-color → backgroundColor.
• Werte werden in der Regel als Strings geschrieben: "32px", "red", "rebeccapurple";
• Einige Eigenschaften können direkt Zahlen akzeptieren: fontWeight: 700.

Diese Regeln gelten, weil Inline-Styles in JavaScript und nicht in reinem CSS geschrieben werden.

Inline-Styles als separates Objekt

Um JSX übersichtlicher und leichter lesbar zu gestalten, können Inline-Styles in einem separaten JavaScript-Objekt gespeichert und anschließend an das style-Attribut übergeben werden.

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

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

Wann sollten Inline-Styles verwendet werden

Inline-Styles eignen sich am besten für:

• Kleine Komponenten;
• Dynamische Styles;
• Schnelle visuelle Anpassungen.

Sie sind nicht ideal für große Layouts oder komplexe Styles, weshalb häufig externe CSS bevorzugt wird.