How to use @friendsofreactjs/react-css-themr - 10 common examples

import style from './style.css';
import Tabs from './tabs';
import Panel from './panel';

const ThemedTabs = themr(identifiers.tabs, style)(Tabs);

//
// Dependency injection
//
import injectProps from './../_lib/injectProps';
import Icon from './../Icon';

const FinalTabsComponent = injectProps({
    IconComponent: Icon
})(ThemedTabs);
FinalTabsComponent.Panel = themr(identifiers.tabsPanel, style)(Panel);

export default FinalTabsComponent;

import {themr} from '@friendsofreactjs/react-css-themr';
import identifiers from '../identifiers';
import style from './style.css';
import ToggablePanel, {
    Header,
    Contents
} from './toggablePanel';

const ThemedToggablePanel = themr(identifiers.toggablePanel, style)(ToggablePanel);
const ThemedToggablePanelHeader = themr(identifiers.toggablePanelHeader, style)(Header);
const ThemedToggablePanelContents = themr(identifiers.toggablePanelContents, style)(Contents);

//
// Dependency injection
//
import injectProps from './../_lib/injectProps';
import Headline from './../Headline';
import IconButton from './../IconButton';

ThemedToggablePanel.Header = injectProps({
    HeadlineComponent: Headline,
    IconButtonComponent: IconButton
})(ThemedToggablePanelHeader);
ThemedToggablePanel.Contents = ThemedToggablePanelContents;

export default ThemedToggablePanel;

const cardFooter = ({ children, theme, componentStyle, componentClass  }: Props) => {

  const footerClass = classNames(
        theme.footer,
        componentClass
      );

  return (
    <div style="{componentStyle}">
      {children}
    </div>
  );
};

export default themr(CARD, baseTheme)(cardFooter) as ThemedComponentClass;

rowClickCallback = () => {
    if (this.props.onClick) {
      this.props.onClick(this.props.callbackValue);
    }
  }

  render () {
    return (
      
        { this.props.children }
      
    );
  }
}

export default themr(TABLE, baseTheme)(TableRow) as ThemedComponentClass;

value={dateTime}
                onBlur={() => { this.setState({ open: false }); }}
                open={open}
                closeOnSelect
                className={theme.dateTimeInput}
                onChange={(dateTime: any) => { this.setDateTime(dateTime); }}
                timeFormat={timePicker}
                dateFormat={dateFormat}
            />
        
    );
  }
}

export { DateTimePicker as UnthemedDropdown };
export default themr(DATETIMEPICKER, baseTheme)(DateTimePicker) as ThemedComponentClass;

default:
        style = '';
        color = '#000';
    }

    classes = theme.alert + ' ' + style;
    return (
      
      { this.state.isActive &amp;&amp; <div>
        <p>{children}</p><button type="button"> this.closeAlert()}&gt;</button>
      </div>}
      
    );
  }
}
export default themr(ALERT, baseTheme)(Alert) as ThemedComponentClass;

import {themr} from '@friendsofreactjs/react-css-themr';
import identifiers from '../identifiers';
import style from './style.css';
import Button from './button';

export default themr(identifiers.button, style)(Button);

const link = ({ url, children, onClick, external, theme }: Props) => {
  return url
    ? (
      
        {children}
      
    )
    : (
      <button>
        {children}
      </button>
    );
};

export default themr(LINK)(link) as ThemedComponentClass;

theme[gridType],
    componentClass
  );

  const thisChildren = React.Children.map(children, (child: React.ReactElement) => {
    if (onClick && !child.props.disableClick) {
      return React.cloneElement(child, { onClick, returnValue });
    }

    return React.cloneElement(child);
  });

  return <div style="{componentStyle}">{thisChildren}</div>;
};

export default themr(GRID, baseTheme)(GridContent) as ThemedComponentClass;

const GridFooter = ({
  children,
  componentClass,
  componentStyle,
  theme,
}: Props) => {
  const gridFooterClass = classNames(
    theme.gridFooter,
    componentClass
  );

  return <div style="{componentStyle}">{children}</div>;
};

export default themr(GRID, baseTheme)(GridFooter) as ThemedComponentClass;