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
+ There are no comments
Add yours