Configuration
Aesthetic provides a handful of options for customization through the configure()
method. If you
would like to customize these options, import and call the method with an options object. This
customization should happen near the root of the application, before any Aesthetic styled React
component is imported or rendered.
setup.ts
#
OptionsThe following options are currently supported. These options are based on the @aesthetic/style
package. Jump over to the official documentation for expanded
information on them.
customProperties
(PropertyHandlerMap
) - Mapping of property handlers to provide custom formats and functionality. Supported by @aesthetic/addon-properties.defaultUnit
(Unit | (prop: string) => Unit
) - A unit to append to numerical values. Can be a string or a function that returns a string. Defaults topx
.deterministicClasses
(boolean
) - Generate class names using a deterministic hash (c1sjakp
) instead of an auto-incremented value (a1
). Useful for scenarios like unit tests. Defaults tofalse
.directionConverter
- (DirectionConverter
) - Function that converts a property or value to their opposite direction. Supported by @aesthetic/addon-direction.injectStrategy
(create | create-async | render
) - The strategy to use for style injection (when applicable). Defaults tocreate-async
.create
- Styles are injected during style sheet creation (createComponentStyles
, etc).create-async
- Likecreate
but injects them asynchronously.render
- Styles are injected during an integration's render path or during an explicit render (renderComponentStyles
, etc).
rootVariables
(boolean
) - Apply CSS variables derived from the current theme to the body:root
. Defaults tofalse
.vendorPrefixer
(VendorPrefixer
) - Apply vendor prefixes to properties and values that require it. We prefix features for browsers with >= 1% market share. Supported by @aesthetic/addon-vendor.
#
AddonsThese addons are typically used in conjuction with options.