Використання CSS-файлу для стилізації компонентів React походить із традиційної структури HTML-CSS. Нижче наведено покрокову інструкцію щодо використання CSS-файлу для стилізації компонентів React:

1. Створення CSS-файлу

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

Приклад:

2. Імпорт CSS-файлу

Використовуйте оператор import для імпорту CSS-файлів у файл компонента. Розмістіть цей оператор імпорту на початку файлу компонента. У лапках '' вкажіть відповідний шлях до файлу.

Приклад:

// Import the CSS file
import './index.css';

Якщо CSS-файл знаходиться у папці styles, тоді оператор імпорту матиме такий синтаксис:

// Import the CSS file from a folder
import './styles/index.css';

Примітка

Використовуйте позначення з крапкою та слешем ./ для посилання на файл у тій самій директорії. Щоб отримати доступ до файлу поза поточною папкою та перейти до батьківської директорії, використовуйте два крапки та слеш ../.

3. Застосування стилів до компонента

Після імпорту стилів ваш компонент отримує доступ до CSS. Відтак можна використовувати CSS-селектори та імена класів для стилізації елементів. Єдина відмінність полягає в тому, що у React-додатках використовується атрибут className замість атрибута class, який застосовується у HTML-файлах.

Приклад:

const Block = () => (
  <div className="container">
    <h1 className="title">Heading</h1>
    <p className="description">Description</p>
  </div>
);

Тепер можна використовувати CSS-класи container, title та description для стилізації елементів у компоненті Block.

Додавання стилів

На цьому етапі можна відкрити CSS-файл і застосувати стилі до визначених імен класів. Наприклад, файл index.css може містити такі стилі:

.container {
  background-color: #f0f0f0;
  padding: 20px;
}

.title {
  color: blue;
  font-size: 24px;
}

.description {
  color: green;
  font-size: 16px;
}

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

Повний код застосунку: