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

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

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

Приклад:

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

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

Приклад:

js

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

js

Примітка

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

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

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

Приклад:

jsx

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

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

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

css

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

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