Episode

Fluent UI React Trainings: Styling components & theming

with Oleksandr Fediashov

Fluent UI React Insights and Training

This tutorial offers an overview of Fluent UI React v9, emphasizing style customizations. It covers the usage of the makeStyles() and mergeClasses() functions. Additionally, it explains how to write styles for basic scenarios and how to apply style overrides for Fluent UI React components and their slots.

Chapters

  • 00:00 - Intro to the lesson
  • 00:18 - makeStyles usage
  • 01:47 - makeStyles & CSS shorthands
  • 02:53 - What are CSS shorthands?
  • 04:12 - Conditional styles via mergeClasses
  • 05:57 - Order is mergeClasses
  • 07:08 - What is Atomic CSS?
  • 08:41 - Using tokens for theming
  • 11:21 - Tokens in different themes
  • 12:30 - Customization of components
  • 13:40 - Customization of slots
  • 16:40 - Using Griffel Devtools
  • 17:58 - Pseudo classes
  • 18:54 - Nested selectors
  • 20:55 - @media queries
  • 21:33 - CSS keyframes, animationName
  • 22:37 - Outro

Developer