makeStyles

Although shorthands is used extensively throughout the Microsoft documentation, it is not necessary here when using makeStyles; I'm expanding any shorthand styling properties under-the-hood.

makeStyles is used to define style permutations in components and is used for style overrides. It returns a React hook that should be called inside a component:

When using single numeric values in makeStyles or makeResetStyles, specify the value's length.

❌ style.minWidth 200

✅ style.minWidth (length.px 200)

open Feliz
open FS.FluentUI

let tokens = Theme.tokens

type Styles = {
    accordion: string
    useArrowNavigationGroup: string
    tooltip: string
    icon: string
    compoundButton: string
}

let useStyles = Fui.makeStyles<Styles> [
    "accordion", [
        style.color.red
        style.backgroundColor.darkGray
    ]
    "useArrowNavigationGroup", [
        style.display.flex
        style.columnGap 15
    ]
    "tooltip", [
        style.backgroundColor tokens.colorBrandBackground
        style.color tokens.colorNeutralForegroundInverted
    ]
    "icon", [
        style.color.green
    ]
    "compoundButton", [
        style.width (length.px 150)
    ]
]

[ReactComponent]
let ToolTip () =
    let styles = useStyles()

    Fui.tooltip [
        tooltip.className styles.tooltip
    ...