Свайпніть щоб показати меню

Хоча вбудовані стилі зручні для невеликого або динамічного оформлення, більшість реальних застосунків використовують зовнішні 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 часто забезпечує чистіший і легший для підтримки код.

1. Як застосувати CSS-клас до елемента у React?

2. Що є правильним щодо зовнішнього CSS у React?

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 1. Розділ 21

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Стилізація Компонентів За Допомогою Зовнішнього CSS