Group decorators

You also have group decorators This allows an element to trigger its styling based on the state of a parent:

import { compose, tokens, group } from 'classy-ui';
const myParent = compose(group);
const myChild = compose(tokens.color.RED_50.groupHover);

Now any myChild of myParent will be red when myParent is being hovered. The following group decorators are available:

  • groupHover

  • groupFocus

  • groupActive

  • groupFirstChild

  • groupLastChild

  • groupOddChild

  • groupEvenChild

  • groupFocusWithin