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.
The following options are currently supported. These options are based on the
package. Jump over to the official documentation for expanded
information on them.
PropertyHandlerMap) - Mapping of property handlers to provide custom formats and functionality. Supported by @aesthetic/addon-properties.
Unit | (prop: string) => Unit) - A unit to append to numerical values. Can be a string or a function that returns a string. Defaults to
boolean) - Generate class names using a deterministic hash (
c1sjakp) instead of an auto-incremented value (
a1). Useful for scenarios like unit tests. Defaults to
DirectionConverter) - Function that converts a property or value to their opposite direction. Supported by @aesthetic/addon-direction.
create | create-async | render) - The strategy to use for style injection (when applicable). Defaults to
create- Styles are injected during style sheet creation (
createbut injects them asynchronously.
render- Styles are injected during an integration's render path or during an explicit render (
boolean) - Apply CSS variables derived from the current theme to the body
:root. Defaults to
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.
These addons are typically used in conjuction with options.