Sign in to confirm you’re not a bot
This helps protect our community. Learn more

Fluent UI React Trainings: Styling components & theming

Microsoft Developer
589K subscribers
<__slot-el>
<__slot-el>
5.3K views 1 year ago
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 ...more
...more
Fluent UI React Trainings: Styling components & theming
80Likes
5,335Views
2024Mar 4
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

Follow along using the transcript.

Microsoft Developer

589K subscribers