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

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

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

• Назви властивостей, що складаються з двох або більше слів, повинні використовувати нотацію camelCase (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}>App title</h1>
  </>
);

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