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

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

Створення зовнішнього CSS-файлу

Спочатку створіть CSS-файл і визначте у ньому стилі:

/* styles.css */
.title {
  font-size: 32px;
  font-weight: 700;
  color: rebeccapurple;
}

Цей CSS-файл містить простий клас, який можна повторно використовувати у різних компонентах.

Імпорт CSS у компонент

Щоб використати стилі, імпортуйте CSS-файл у файл компонента:

import "./styles.css";

const App = () => (
  <>
    <h1 className="title">App title</h1>
  </>
);

У React атрибут class записується як className, оскільки class є зарезервованим словом у JavaScript.

Як працює зовнішній CSS у React

CSS-файли застосовуються глобально за замовчуванням. Будь-який компонент може використовувати клас, визначений у підключеному CSS-файлі. Стилі поводяться так само, як у стандартних HTML і CSS. Це робить зовнішній CSS знайомим і простим у використанні, особливо для розробників із досвідом традиційної веб-розробки.

Коли використовувати зовнішній CSS

Зовнішній CSS є доцільним вибором, коли:

• Стилі використовуються у кількох компонентах;
• Макети стають складнішими;
• Необхідно чітко розділити структуру та стилізацію.

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