ui/Skinnable

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 like moonstone/Skinnable. Interface libraries will supply a set of supported skins which will be accessible to their components.

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

Members

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.

Example:

App = Skinnable({
	skins: {
		dark: 'moonstone',
		light: 'moonstone-light'
	},
	defaultTheme: 'dark'
}, App);
import Skinnable from '@enact/ui/Skinnable';
Configuration
prop
string

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.

skins
Object

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.

defaultSkin
String

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.

ArrayBooleanFunctionModuleNumberObjectString