Використання Вбудованих Стилів у React

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

Ключова відмінність полягає в тому, що у React значення атрибута style — це об'єкт JavaScript, а не CSS-рядок.

Ось приклад застосування інлайнових стилів безпосередньо в JSX:

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

У цьому прикладі елемент h1 отримує стилі через атрибут style, який містить об'єкт JavaScript.

Важливі правила для інлайнових стилів

Під час використання інлайнових стилів у React слід враховувати такі правила:

• Назви CSS-властивостей, що складаються з двох або більше слів, мають використовувати camelCase
  • font-weight → fontWeight;
  • background-color → backgroundColor.
• Значення зазвичай записуються як рядки: "32px", "red", "rebeccapurple";
• Деякі властивості можуть приймати числа напряму: fontWeight: 700.

Ці правила існують тому, що інлайнові стилі записуються на JavaScript, а не на звичайному CSS.

Інлайнові стилі як окремий об'єкт

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

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

const App = () => (
  <>
    <h1 style={appStyles}>App title</h1>
  </>
);

Коли використовувати inline-стилі

Inline-стилі найкраще підходять для:

• Невеликих компонентів;
• Динамічних стилів;
• Швидких візуальних змін.

Вони не є оптимальними для великих макетів або складного стилізування, тому часто віддають перевагу зовнішнім CSS.