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 stackblitz.com/edit/vitejs-vi...
#2 Theming & tokens stackblitz.com/edit/vitejs-vi...
#3 Customizing components stackblitz.com/edit/vitejs-vi...
💡 References:
#1 Fluent UI Insights: Styling
• Fluent UI React Insigh...
#2 Griffel playground griffel.js.org/try-it-out/
#3 Griffel repository github.com/microsoft/griffel

[@durgeshwarake3804]

Awesome

[@DevilsAvacado69]

Hey, Microsoft I wanted to ask is there anyone working on an audio input framework for an AI UI? like star trek would have "Computer play youtube video I designated as "test1" keep it to the bottom right of the screen, and explore the first few websites of my search topic on main view" just a thought. this janky idea can be smoothed over so much more with a decent AI. Im not a dev, I cant code. I just want these connections made sooner, we have the tools there now its just blending it together so they can talk to each other.

[@korzentowppl]

Hello