Style: Utilities
Collection of utilities for styling with Griffel.
Get Started
npm i @microsoft/arbutus.style-utilities
Usage
mapToStyles
mapToStyles is designed to help generating styles variants. It generates Griffel classes from a map of values.
import { mapToStyles } from "@microsoft/arbutus.style-utilities";
Parameters
map
An object, where the key will become a class name, and the value will be passed to the styleFunction
.styleFunction
A function that takes the value from the map
and returns a GriffelStyle
.
Returns
An object with keys from the map and values as GriffelStyle returned by the styleFunction
.
Example
Step 1: Create a map of variants for your component.
type ColorValue = string;
const textColors = { primary: 'red', secondary: 'blue' }
const textStyleFunction = (color: ColorValue) => ({
color,
'&:visited': { color }
})
const textColorClasses = mapToStyles<ColorValue, typeof textColors>(textColors, textStyleFunction);
Step 2: Pass to the makeStyles()
function.