Стили как объекты

Чаще всего стили страницы лежат в style.css, а элементы получают их через className. Но иногда стиль зависит от ваших данных, например цвет сцены. Тогда можно задать элементу атрибут style. В JSX его значение — не текст, как в HTML, а объект:

<p style={{ color: "teal", fontSize: 24 }}>Лесная сцена</p>

Внешние скобки говорят «здесь начинается JavaScript», а внутренние — это сам объект. Его свойства — это свойства CSS в camelCase, знакомом вам по element.style в JavaScript: fontSize вместо font-size, backgroundColor вместо background-color. Значения — строки, как в CSS, но число означает пиксели: fontSize: 24 — это 24px. (Свойства без единиц измерения сохраняют число как есть, например lineHeight: 1.5.)

Поскольку это объект, значение может браться из переменной:

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

    return (
        <p style={{ backgroundColor: stageColor, padding: 8 }}>Лесная сцена</p>
    );
}

Текст, как в HTML, не подойдёт: с style="color: teal" приложение останавливается, а консоль объясняет, что style ждёт объект: Error: The `style` prop expects a mapping from style properties to values, not a string.