How to use the @patternfly/react-styles.css function in @patternfly/react-styles

const AlertIcon = ({ variant, className, ...props }) => {
  const Icon = variantIcons[variant];
  return (
    <div>
      
    </div>
  );
};

...props
}) => {
  variantLabel = variantLabel || capitalize(AlertVariant[variant]);
  const readerTitle = (
    
      <span>{`${variantLabel} alert:`}</span>
      {title}
    
  );

  const customClassName = css(styles.alert, getModifier(styles, variant, styles.modifiers.info), className);

  return (
    <div aria-label="{ariaLabel}">
      
      <h4>{readerTitle}</h4>
      {children &amp;&amp; (
        <div>
          <p>{children}</p>
        </div>
      )}
      {action &amp;&amp; (
        <div>{React.cloneElement(action, { title, variantLabel })}</div>
      )}
    </div>
  );
};

export const LoginMainFooterBandItem: React.FunctionComponent = ({
  children = null,
  className = '',
  ...props
}: LoginMainFooterBandItemProps) => (
  <p>
    {children}
  </p>
);

render() {
    const { children, className, isExpanded, checked, isGrouped, ...props } = this.props;
    this.renderedChildren = this.extendChildren(props);
    return (
      
        <div>
          <form novalidate="">
            <div>{this.renderedChildren}</div>
          </form>
        </div>
      
    );
  }
}

export const AboutModalBoxContent: React.SFC = ({
  children,
  className = '',
  trademark,
  id,
  noAboutModalBoxContentContainer = false,
  ...props
}: AboutModalBoxContentProps) => (
  <div id="{id}">
    <div>
      {noAboutModalBoxContentContainer ? children : <div>{children}</div>}
    </div>
    <p>{trademark}</p>
  </div>
);

onClose={this.onClose}
            ariaLabelledBy={`${ariaLabelledBy || ''} ${selectToggleId}`}
            variant={variant}
            ariaLabelToggle={ariaLabelToggle}
            handleTypeaheadKeys={this.handleTypeaheadKeys}
            isDisabled={isDisabled}
          >
            {customContent && (
              <div>
                {toggleIcon &amp;&amp; <span>{toggleIcon}</span>}
                <span>{placeholderText}</span>
              </div>
            )}
            {variant === SelectVariant.single &amp;&amp; !customContent &amp;&amp; (
              <div>
                {toggleIcon &amp;&amp; <span>{toggleIcon}</span>}
                <span>
                  {this.getDisplay(selections as string, 'node') || placeholderText || childPlaceholderText}
                </span>
              </div>
            )}
            {variant === SelectVariant.checkbox &amp;&amp; !customContent &amp;&amp; (
              
                <div>
                  {toggleIcon &amp;&amp; <span>{toggleIcon}</span>}
                  <span>{placeholderText}</span>
                  {selections &amp;&amp; (Array.isArray(selections) &amp;&amp; selections.length &gt; 0) &amp;&amp; (
                    <div>
                      <span>{selections.length}</span>
                    </div>
                  )}
                </div>

const EmptyStateSecondaryActions = ({ children, className, ...props }) => (
  <div>
    {children}
  </div>
);

exitDelay,
      appendTo,
      zIndex,
      maxWidth,
      isAppLauncher,
      distance,
      aria,
      boundary,
      flipBehavior,
      tippyProps,
      id,
      ...rest
    } = this.props;
    const content = (
      <div id="{id}" role="tooltip">
        {bodyContent}
      </div>
    );
    return (

export default () => ({ className: css(styles.demoLayout) });