Серия

Учебные материалы по пользовательскому интерфейсу Fluent: компоненты стилей и тематические материалы

на Oleksandr Fediashov

Fluent UI Insights

В этом руководстве представлен обзор Fluent UI React версии 9, подчеркивающий настройки стиля. Он охватывает использование makeStyles() функций и mergeClasses() функций. Кроме того, в нем объясняется, как создавать стили для основных сценариев и применять переопределения стилей для компонентов Fluent UI React и их слотов.

Главы

  • 00:00 — введение в занятие
  • 00:18 — использование makeStyles
  • 01:47 - makeStyles и CSS shorthands
  • 02:53 - Что такое css shorthands?
  • 04:12 — условные стили с помощью mergeClasses
  • 05:57 — order is mergeClasses
  • 07:08 - Что такое атомарный CSS?
  • 08:41 — использование маркеров для их создания
  • 11:21 — токены в разных темах
  • 12:30 — настройка компонентов
  • 13:40 — настройка слотов
  • 16:40 — использование griffel Devtools
  • 17:58 — псевдоклассы
  • 18:54 — вложенные селекторы
  • 20:55 - @media запросов
  • 21:33 — ключевые кадры CSS, имя анимации
  • 22:37 - Outro

Разработка