How to use the react-fela.createComponent function in react-fela

);

const StyledCardContent = createComponent(() => ({
  padding: '8px',
  marginLeft: '60px',
}));

const StyledCardTitle = createComponent(
  () => ({
    width: '200px',
    ellipsis: true,
  }),
  'h6'
);

const StyledCardParagraph = createComponent(
  () => ({
    margin: 0,
    ellipsis: true,
    width: '200px',
    // whiteSpace: 'nowrap',
    display: '-webkit-box',
    WebkitBoxOrient: 'vertical',
    WebkitLineClamp: 3,
    lineHeight: '18px',
    maxHeight: '54px',
    fontSize: 'small',
  }),
  'p'
);

export default ({ name, description, image, ...rest }) =>

flexShrink: props.shrink || 0,
  flexBasis: props.basis || 'auto',
  flex: props.flex === true ? 1 : props.flex,
  justifyContent: props.justifyContent || props.center && 'center',
  alignItems: props.alignItems || props.center && 'center',
  alignContent: props.alignContent || 'flex-start',
  alignSelf: props.alignSelf || 'stretch',
  order: props.order,

  // shorthands
  display: (props.inline ? 'inline-' : '') + 'flex',
  flexWrap: props.wrap && 'wrap' || props.wrapReverse && 'wrap-reverse' || 'nowrap',
  flexDirection: (props.row ? 'row' : 'column') + (props.reverse ? '-reverse' : '')
})

export default createComponent(Box)

const rule = ({ fontSize, padding }) => ({
  _className: 'foo bar',
  fontSize,
  color: 'red',
  '@media (min-height: 300px)': {
    backgroundColor: 'red',
    lineHeight: 2,
    ':hover': {
      color: 'black',
      paddingLeft: padding,
    },
  },
})

export default createComponent(rule)

render() {
      const { skeletorLoading, theme, renderer } = this.context;

      return createComponent(
        p =>
          styles({
            ...p,
            skeletor: skeletorLoading
              ? {
                  background: this.background,
                  overlay: this.overlay,
                  text: this.text,
                  isLoading: true,
                }
              : {
                  background: () => ({}),
                  overlay: () => ({}),
                  text: () => ({}),
                  isLoading: false,
                },

export default (styles, props = p => Object.keys(p), propName) => WrappedComponent => {
  if (!propName && typeof props === 'string') {
    propName = props;
    props = null;
  }
  if (!propName) {
    propName = 'className';
  }
  return createComponent(
    typeof styles === 'function' ? styles : () => styles,
    ({ className, ...rest }) => {
      rest[propName] = className
      return (
        
      )
    },
    props
  );
};

});
}, 'div', function (p) { return Object.keys(p); });
var Title = createComponent(function (_a) {
    var theme = _a.theme, inverse = _a.inverse;
    return ({
        display: 'block',
        fontWeight: 'bold',
        marginBottom: theme.space3,
        padding: theme.space0,
        color: inverse ? theme.light : theme.dark,
    });
}, function (p) {
    return (React.createElement("h4", null,
        React.createElement(Link, __assign({}, p))));
}, function (p) { return Object.keys(p); });
var PaddingLink = createComponent(function (_a) {
    var theme = _a.theme;
    return ({
        padding: theme.space1 + " " + theme.space0,
    });
}, function (p) { return React.createElement(Link, __assign({}, p)); }, function (p) { return Object.keys(p); });
var Item = createComponent(function (_a) {
    var theme = _a.theme;
    return ({
        onHover: {
            '> div': {
                display: 'block',
            },
        },
    });
}, 'div', function (p) { return Object.keys(p); });
var SubMenu = createComponent(function (_a) {

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createUpdateQuery } from 'olymp-router';
import { createComponent } from 'react-fela';
import { lightboxActions } from './lightbox-redux';
import cloudinaryUrl from './cloudinary-url';
import Image from './image';

const Img = createComponent(
  ({ theme }) => ({
    cursor: 'pointer',
    onHover: {
      opacity: 0.85,
    },
  }),
  p =&gt; <img>,
  p =&gt; Object.keys(p),
);

@connect(null, dispatch =&gt; ({
  updateQuery: createUpdateQuery(dispatch),
  ...lightboxActions(dispatch),
}))
export default class Lightbox extends Component {
  static contextTypes = {

import React, { Component } from 'react';
import { Link } from 'olymp';
import { Form, Input, notification } from 'antd';
import { createComponent } from 'react-fela';
import tinycolor from 'tinycolor2';
import Modal from './modal';
import withAuth from './with-auth';

const modalSettings = { visible: true, okText: 'Anmelden', cancelText: 'Abbruch', transitionName: 'fade', maskTransitionName: 'fade' };
const formItemLayout = { labelCol: { span: 0 }, wrapperCol: { span: 24 } };

const FormItem = createComponent(({ theme }) => ({
  margin: '1.5rem',
  '> .ant-form-item-control-wrapper': {
    '> .ant-form-item-control': {
      '> .ant-input-wrapper': {
        '> .ant-input': {
          borderRadius: 0,
          borderColor: theme.color,
          '::placeholder': {
            color: theme.color,
          }
        },
        '> .ant-input-group-addon': {
          background: `linear-gradient(90deg, ${tinycolor(theme.color).darken(3).toRgbString()}, ${tinycolor(theme.color).lighten(3).toRgbString()})`,
          color: '#FFFFFF',
          borderRadius: 0,
          borderColor: theme.color,

},
        '&.active': {
            textDecoration: "underline solid " + (inverse ? theme.light : theme.color),
        },
    });
}, function (_a) {
    var inverse = _a.inverse, onClick = _a.onClick, rest = __rest(_a, ["inverse", "onClick"]);
    return onClick ? React.createElement("span", __assign({ onClick: onClick }, rest)) : React.createElement(NavLink, __assign({}, rest));
}, function (p) { return Object.keys(p); });
var Placeholder = createComponent(function () { return ({
    cursor: 'default',
}); }, 'span', function (_a) {
    var inverse = _a.inverse, p = __rest(_a, ["inverse"]);
    return Object.keys(p);
});
var NavbarLink = createComponent(function (_a) {
    var theme = _a.theme, inverse = _a.inverse;
    return ({
        color: inverse ? theme.light2 : theme.dark2,
        display: 'block',
        fontFamily: theme.fontFamily,
        textDecoration: 'none',
        ellipsis: true,
    });
}, function (_a) {
    var to = _a.to, onClick = _a.onClick, rest = __rest(_a, ["to", "onClick"]);
    return to || onClick
        ? React.createElement(Link, __assign({ to: to, onClick: onClick }, rest))
        : React.createElement(Placeholder, __assign({}, rest));
}, function (p) { return Object.keys(p); });
NavbarLink.displayName = 'Navbar.Link';
NavbarLink.propTypes = {

paddingBottom: '0!important',
    borderTop: '0!important',
    borderLeft: '0!important',
    borderRight: '0!important',
    borderBottom: '1px solid #e6e6e6',
  }),
  props =&gt; <div>
);

const StyledPagination = createComponent(() =&gt; ({
  float: 'right',
  clear: 'both',
  margin: '.75rem 0',
}));

const DropdownGroup = createComponent(() =&gt; ({
  float: 'right',
  textAlign: 'right',
}));

const Panel = createComponent(() =&gt; ({
  padding: '5px 10px',
  borderBottom: '1px solid #e6e6e6',
}));

@withRouter
@withCollections
export default class SidebarHeader extends Component {
  renderStateMenu() {
    const { states, setQueryToState } = this.props;

    return (</div>