Styles als Objekte

Die Styles einer Seite gehören meistens in style.css, und Elemente bekommen sie mit className. Manchmal kommt ein Style aber aus deinen Daten, etwa die Farbe einer Bühne. Dann kannst du dem Element das Attribut style geben. In JSX ist sein Wert kein Text wie in HTML, sondern ein Objekt:

<p style={{ color: "teal", fontSize: 24 }}>Waldbühne</p>

Die äußeren Klammern sagen „hier kommt JavaScript“, die inneren sind das Objekt. Seine Eigenschaften sind CSS-Eigenschaften in camelCase, wie du sie von element.style in JavaScript kennst: fontSize für font-size, backgroundColor für background-color. Die Werte sind Texte wie in CSS, aber eine Zahl bedeutet Pixel: fontSize: 24 ist 24px. (Eigenschaften ohne Einheit behalten ihre Zahl, etwa lineHeight: 1.5.)

Da es ein Objekt ist, kann ein Wert aus einer Variablen kommen:

export default function App() {
    const buehnenFarbe = "#dcfce7";

    return (
        <p style={{ backgroundColor: buehnenFarbe, padding: 8 }}>Waldbühne</p>
    );
}

Ein Text wie in HTML funktioniert nicht: Mit style="color: teal" hält die App an, und die Konsole erklärt, dass style ein Objekt erwartet: Error: The `style` prop expects a mapping from style properties to values, not a string.