enact logoEnact
Edit on GitHub

moonstone/Skinnable

Exports the Skinnable higher-order component (HOC).

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

Members

SkinnableHigher-Order Component

This higher-order component is based on ui/Skinnable.

Skinnable comes pre-configured for Moonstone's supported skins: "dark" (default) and "light". It is used to apply the relevant skinning classes to each component and has been used to pre-select specific skins for some components.

Note: This HoC passes className to the wrapped component. It must be passed to the main DOM node.

import Skinnable from '@enact/moonstone/Skinnable';
Properties added to wrapped component
skin
String

Select a skin by name by specifying this property.

Available Moonstone skins are "dark" (default) and "light". This may be changed at runtime. All components already use their defaults, but a skin may be changed via this prop or by using Skinnable directly and a config object.

Example:

<Button skin="light">
Default: 'dark'
ArrayBooleanFunctionModuleNumberObjectString