Fluent UI React Trainings: Styling components & theming

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

📝 Examples:
#1 Base styling https://stackblitz.com/edit/vitejs-vi...
#2 Theming & tokens https://stackblitz.com/edit/vitejs-vi...
#3 Customizing components https://stackblitz.com/edit/vitejs-vi...

💡 References:
#1 Fluent UI Insights: Styling
Fluent UI React Insights: Styling
#2 Griffel playground https://griffel.js.org/try-it-out/
#3 Griffel repository https://github.com/microsoft/griffel

• #science_technology
• #azure
• #microsoft
• #tech
• #technology
• #dev
• #development
• #cloud_computing