Стилізація за Допомогою CSS Файлу

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

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

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

Приклад:

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

Використовуйте інструкцію import для імпорту файлів CSS у файл компонента. Помістіть цей оператор імпорту у верхній частині файлу компонента. Всередині лапок "" вкажіть шлях до відповідного файлу.

Приклад:

js
9
1
2
// Import the CSS file
import './index.css';

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

js
9
1
2
// Import the CSS file from a folder
import './styles/index.css';

Примітка

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

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

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

Приклад:

jsx
9
1
2
3
4
5
6
const Block = () => (
  <div className="container">
    <h1 className="title">Heading</h1>
    <p className="description">Description</p>
  </div>
);

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

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

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

css
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
  background-color: #f0f0f0;
  padding: 20px;
}

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

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

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

Повний код програми: