Fluent UI Trainings: Styling components & theming

Estimated read time 1 min read

Post Content

​ 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-vite-khtk4c
#2 Theming & tokens https://stackblitz.com/edit/vitejs-vite-8zqm6i
#3 Customizing components https://stackblitz.com/edit/vitejs-vite-pc96s9

? References:
#1 Fluent UI Insights: Styling
https://www.youtube.com/watch?v=a8TFywbXBt0
#2 Griffel playground https://griffel.js.org/try-it-out/
#3 Griffel repository https://github.com/microsoft/griffel   Read More Microsoft Developer 

You May Also Like

More From Author

+ There are no comments

Add yours