How to use @css-modules-theme/react - 5 common examples

render() {
    const { theme, themeProps } = this.props;
    const themingProperties = buildThemeProperties(theme, themeProps);
    const themeStyles = composeThemeFromProps(style, themingProperties, {
      compose: 'Merge',
    });

    let layouts;
    let cards = this.props.cardsConfiguration.cards;
    if(!cards) return null;

    let childrenWithKeys = null;

    if(this.props.layoutConfiguration.draggable){
      /* this is a layout where a user can move cards anywhere he wants */
      const cardIds = this.getCardIdsFromLayout(cards);
      childrenWithKeys = this.getChildrenWithKeys(cardIds);
      layouts = this.state.layouts;
    }
    else{

render() {
    const { theme, themeProps } = this.props;
    const themingProperties = buildThemeProperties(theme, themeProps);
    const themeStyles = composeThemeFromProps(style, themingProperties, {
      compose: 'Merge',
    });
    const { onClickAction } = this;
    const actionIcon = this.getActionIconURL();
    // const divStyle = { background: `url('${actionIcon}') no-repeat center center` };
    const actionTooltip = (this.action.displayName) ? ` ${themeStyles.actionTooltip}` : null;
    return (
      <div role="button" tabindex="0" data-tooltip="{this.action.displayName}"> this.onMouseItem(true)}</div>

render() {
    let showHeader = true;
    const {
      actions, title,
      configId,
      children,
      theme,
      themeProps,
      cardCssClass,
    } = this.props;
    const {
      isNewCard,
    } = this.state;

    const themingProperties = buildThemeProperties(theme, themeProps);
    const themeStyles = composeThemeFromProps(style, themingProperties, {
      compose: 'Merge',
    });

    let cardRef;
    let cardClassName = themeStyles.card;

    if (cardCssClass) {
      cardClassName += themeStyles[cardCssClass];
    }

    if (!title && !actions) {
      showHeader = false;
    } else if (title) {
      cardClassName += ` ${themeStyles.withTitle}`;
    }

render() {
    const {
      actions,
      title,
      theme,
      themeProps,
    } = this.props;

    const themingProperties = buildThemeProperties(theme, themeProps);
    const themeStyles = composeThemeFromProps(style, themingProperties, {
      compose: 'Merge',
    });

    return (
      <div>
        {actions ?  : null }
        {title ? <div><span title="{title}">{title}</span></div> : null }
      </div>
    );
  }
}

render() {
    const { menuOpen } = this.state;
    const { theme, themeProps } = this.props;
    const themingProperties = buildThemeProperties(theme, themeProps);
    const themeStyles = composeThemeFromProps(style, themingProperties, {
      compose: 'Merge',
    });

    const actionItemsClassName = `${themeStyles.cardActionItems} ${menuOpen ? '' : themeStyles.dispnone}`;
    const actionsMenuClassName = `${themeStyles.cardsActionsMenu} ${menuOpen ? themeStyles.expanded : themeStyles.collapsed}`;
    const actionsClassName = `${themeStyles.actions} ${menuOpen ? themeStyles.menuOpen : ''}`;

    if (this.items.length > 0) {
      return (
        <div>
          <div> this.onActionMenuClick()}
            onKeyUp={() =&gt; this.onActionMenuClick()}
            role="button"
            tabIndex={0}</div></div>