A higher-order component for customizing the visual appearance throughout an application.

This is the base-level implementation of this component. It will typically never be accessed directly, and only be instantiated with a configuration once inside a visual library. Interface libraries will supply a set of supported skins which will be accessible to their components.

import Skinnable from '@enact/ui/Skinnable';


SkinnableHigher-Order Component

A higher-order component that assigns skinning classes for the purposes of styling children components.

Use the config options to specify the skins your theme has. Set this up in your theme's decorator component to establish your supported skins.

Note: This HoC passes className to the wrapped component. It must be passed to the main DOM node. Additionally, it can be configured to pass the skin and skin variant as props.


const MyApp = ({skinName, ...rest) => (<div {...props}>{skinName}</div>);
App = Skinnable({
	prop: 'skinName',
	skins: {
		dark: 'moonstone',
		light: 'moonstone-light'
	defaultTheme: 'dark'
	defaultVariants: ['highContrast'],
	allowedVariants: ['highContrast', 'largeText', 'grayscale']
}, MyApp);
import Skinnable from '@enact/ui/Skinnable';

The prop in which to pass the skinVariants value to the wrapped component. The recommended value is "skinVariants".

If left unset, the skinVariant will not be passed to the wrapped component.


The prop in which to pass the effective skin to the wrapped component.

If left unset, the current skin will not be passed to the wrapped component.


A hash mapping the available skin names to their CSS class name.

The keys are accepted as the only valid values for the skin prop on the wrapped component.


Assign a default skin from the skins list.

This will be used if the instantiator of the wrapped component provides no value to the skin prop.


Initial collection of applied variants

This will be used if the instantiator of the wrapped component provides no value to the skinVariants prop.


A complete list of all supported variants.

These will translate to CSS class names so should not conflict with any skin names. CamelCase is recommended for the values.

Properties added to wrapped component

The name of the skin a component should use to render itself. Available skins are defined in the "defaultConfig" for this HOC.


The variant(s) on a skin that a component should use when rendering. These will typically alter the appearance of a skin's existing definition in a way that does not override that skin's general styling.

Multiple data types are supported by this prop, which afford different conveniences and abilities. String and Array are effectively the same, supporting just additions to the variants being applied to a component, and are much more convenient. Objects may also be used, and have the ability to disable variants being passed by their ancestors. Objects take the format of a basic hash, with variants as key names and true/false Booleans as values, depicting their state. If a variant is excluded from any version of data type used to set this prop, that variant will ignored, falling back to the defaultVariant or parent variant, in that order.

skinVariants examples:

 // String

 // Array

 // Object
 	highContrast: true,
 	grayscale: false