Вбудовані Стилі

Одним з простих, але дещо обмежених підходів до додавання стилів є використання вбудованих стилів, подібно до того, як ми застосовуємо стилі до HTML-елементів за допомогою атрибуту style. У React єдина відмінність полягає в тому, що значенням цього атрибуту є об'єкт, а не рядок. Давайте зануримося в деталі.

Компонент App у наведеному вище прикладі містить елемент h1 з вбудованими стилями, визначеними за допомогою атрибута style. Ось кілька ключових моментів, які слід пам'ятати про вбудовані стилі:

• Назви властивостей, що складаються з двох або більше слів, повинні відповідати нотації верблюжого регістру (camelCase). Наприклад, замість властивості CSS font-weight слід використовувати fontWeight.
• При присвоєнні значень CSS-властивостям ми зазвичай використовуємо рядки, за винятком властивостей, які очікують простих чисел. Ось чому властивість fontWeight використовує число (700) як значення, а властивість fontSize використовує рядкове значення (32px).

Вбудовані стилі у вигляді окремого об'єкта

Щоб зберегти наш JSX-код чистим і цілеспрямованим, ми можемо визначити вбудовані стилі як окремий JavaScript-об'єкт, а потім призначити цьому об'єкту атрибут style. Такий підхід покращує зручність супроводу та читабельність наших компонентів.

У цьому прикладі ми вводимо об'єкт appStyles, який представляє ті ж самі стилі, що використовувалися раніше, але тепер у вигляді окремого об'єкта. Таке розділення завдань покращує зрозумілість коду нашого компонента.