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

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

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

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

Секція 4. Розділ 3

Запитати АІ

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

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