Variants were the most requested feature in version 1.0 and are now available to use!
You can mix them with other Unistyles features like media queries and breakpoints.
Variants are objects that can be nested in any style object:
groups of atomic variants.
To define a group, first you need to name it and then define variants within it:
These groups will later be used to select your variants, so remember to name them appropriately.
With the given structure, you can now define your variants that can contain any number of styles. You can also use
media queries or styles like
With your named groups, you can now select any variant from your stylesheet using the
TypeScript will provide perfect autocompletion for your variants, ensuring accuracy!
Selecting variants with boolean values
You can also use boolean values to select variants:
If you specify a boolean variants like “true”, there is no requirement to specify a “false” variant (and vice versa).
You can mix boolean variants with other variants as well.
You can define a
default variant that will be used when you don’t pass any variant to the
Options to select the variant
If you pass
empty object Unsityles will try to find the
default variant in your stylesheet:
Passing an object with named keys and
undefined will work the same way dafaulting to the
Lastly, you can pass the correct variant name for a variant group:
Pass variants as component props
Variants were designed to be used as component props:
Defining the same variant across multiple styles
It’s possible to define the same variant group across multiple styles:
In this case, the generated TypeScript type will be:
If you don’t need all variants and want the correct type, please add empty variants:
The generated TypeScript type will then be: