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

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

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

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

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

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

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

const App = () => (
  <>
    <h1 style={appStyles}>Назва додатку</h1>
  </>
);

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