React Styled Components: пример решения реальной задачи

Опубликовано: 03 Ноябрь 2024
на канале: MakeWeb.me

9,818

186

Styled Components (http://styled-components.com) это в некоторых случаях очень полезный инструмент, позволяющий в стилизации задействовать внешние условия, например, рисовать разный цвет фона по значению переменной. В этом видео Styled Components используется для решения конкретной возникшей на боевом проекте ситуации.

СОДЕРЖАНИЕ:
00:00 Описание проблемы, которую мы будем решать.
02:52 Styled Components (SC) как решение проблемы. ThemeProvider
03:47 Разбираем код. ThemeProvider. Как работает Styled Components и использует шаблонные строки (template strings). Варьируем значения CSS-свойств, передавая пропсы.
07:32 Данный случай - частное решение и основные стили находятся в CSS, а в SC только медиа-запросы. Имеет смысл использовать только SC.
08:12 Передача своих пропсов. Неудобство крипто-написания классов SC. Плюсы применения SC.
10:52 Оборачивание существующих React-компонентов в SC. Использование почти всех возможностей CSS внутри SC.
11:40 Проблема со специфичностью селекторов.
14:41 Несколько ThemeProvider'ов.
15:09 Про подстановку картинок путем импорта в JS.
17:30 Заключение.

⚛️⚛️⚛️
Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me.
Детали тут: https://makeweb.me/course-js-fullstac...
Телеграм для связи по курсу: @makewebchatme

🛍 🛍 🛍
Поддержи проект и получи скидку 5% на 1-ю оплату хостинга/домена Reg.ru.
Промо-код: 948E-53B9-CF98-8204 (вводится во время оплаты услуги).

💬 💬 💬
Присоединяйся к нашему Telegram-чату https://t.me/makewebme