makeResetStyles

The makeResetStyles API works similarly to makeStyles and is used to generate styles as a single monolithic class to avoid the "CSS rules explosion" problem.

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

❌ style.minWidth 200

✅ style.minWidth (length.px 200)

let dialogClass = Fui.makeResetStyles [
    style.position.fixedRelativeToWindow
    style.top (length.px 200)
    style.backgroundColor tokens.colorBrandBackground2
    style.margin (length.auto)
    style.borderStyle.none
    style.padding (10, 50)
    style.boxShadow (5, 5, tokens.shadow16)
    style.width (length.px 450)
    style.height (length.px 200)
    style.zIndex 100
]

[<ReactComponent>]
let Dialog () =
    let isOpen, setIsOpen = React.useState false
    let dialogClass = dialogClass()

    Fui.dialog [
        dialog.className dialogClass
    ...