Styly jako objekty

Vzhled stránky většinou patří do style.css a prvky ho dostanou pomocí className. Někdy ale styl vychází z vašich dat, třeba barva pódia. Pak můžete prvku dát atribut style. Jeho hodnota v JSX není text jako v HTML, ale objekt:

<p style={{ color: "teal", fontSize: 24 }}>Lesní scéna</p>

Vnější závorky říkají „teď přijde JavaScript“ a vnitřní jsou objekt. Jeho vlastnosti jsou vlastnosti CSS v camelCase, jak je znáte z prvek.style v JavaScriptu: fontSize místo font-size, backgroundColor místo background-color. Hodnoty jsou texty jako v CSS, ale číslo znamená pixely: fontSize: 24 je 24px. (Vlastnosti bez jednotek si číslo nechají, třeba lineHeight: 1.5.)

Protože je to objekt, hodnota může pocházet z proměnné:

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

    return (
        <p style={{ backgroundColor: barvaPodia, padding: 8 }}>Lesní scéna</p>
    );
}

Text jako v HTML nefunguje: se style="color: teal" se aplikace zastaví a konzole vysvětlí, že style čeká objekt: Error: The `style` prop expects a mapping from style properties to values, not a string.