Варіанти стилізації в React

React не нав'язує єдиний спосіб стилізації компонентів. Натомість він надає гнучкість у виборі способу застосування стилів відповідно до потреб проєкту.

Стилізація в React все ще базується на CSS. Відмінність полягає у способі організації та застосування стилів до компонентів.

У цьому курсі розглядаються два основних підходи до стилізації:

• Вбудовані стилі: стилі застосовуються безпосередньо до елементів за допомогою атрибута style та JavaScript-об'єктів;
• Зовнішні CSS-файли: стилі пишуться у традиційних CSS-файлах і застосовуються через імена класів.

Стилізація за допомогою бібліотек і фреймворків

У реальних проєктах React-додатки часто стилізуються за допомогою сторонніх бібліотек і фреймворків. Деякі популярні варіанти:

• CSS Modules;
• Styled Components;
• Emotion;
• Tailwind CSS;
• Material UI (MUI);
• Chakra UI.

Ці інструменти пропонують розширені можливості, такі як ізольовані стилі, дизайн-системи та утилітарна стилізація.

Чому ми не розглядаємо їх тут

Хоча бібліотеки для стилізації є потужними, вони додають додаткову складність і вводять нові концепції, що виходять за межі основ React. У цьому курсі мета — закласти міцну базу, зрозуміти, як працюють компоненти React, уникнути зайвих відволікань на початковому етапі.