How to use the @uifabric/utilities.css function in @uifabric/utilities

export const SimpleCardRow = NamedFC('SimpleCardRow', ({ label: givenLabel, content, rowKey, contentClassName }) => {
    const contentStyling = css(styles.instanceListRowContent, contentClassName);

    return (
        
            {givenLabel}
            {content}
        
    );
});

const createListItem = (icon: JSX.Element, label: string, content: string | JSX.Element, contentClassName?: string) => (
        <li>
            <span aria-hidden="true">
                {icon}
            </span>
            <span>{label}</span>
            <span>{content}</span>
        </li>
    );

public render(): JSX.Element {
        const showContent = this.state.showContent;
        let iconName = this.iconNameUp;
        let content = null;

        if (showContent) {
            iconName = this.iconNameDown;
            content = <div>{this.props.content}</div>;
        }

        return (
            <div>
                
                    <span>{this.props.header}</span>
                
                {content}
            </div>
        );
    }
}

});

    let todayDateString: string = '';
    let selectedDateString: string = '';
    if (dateTimeFormatter && strings!.todayDateFormatString) {
      todayDateString = format(strings!.todayDateFormatString, dateTimeFormatter.formatMonthDayYear(today!, strings!));
    }
    if (dateTimeFormatter && strings!.selectedDateFormatString) {
      selectedDateString = format(strings!.selectedDateFormatString, dateTimeFormatter.formatMonthDayYear(selectedDate!, strings!));
    }
    const selectionAndTodayString = selectedDateString + ', ' + todayDateString;

    return (
      <div aria-label="{selectionAndTodayString}">
        <div aria-atomic="true" aria-live="polite">
          <span>{selectedDateString}</span>
        </div>
        {isDayPickerVisible &amp;&amp; (
          </div>

private renderDayCells = (
    classNames: IProcessedStyleSet,
    day: IDayInfo,
    dayIndex: number,
    weekIndex: number,
    weekCorners?: IWeekCorners,
    ariaHidden?: boolean
  ): JSX.Element => {
    const { navigatedDate, dateTimeFormatter, allFocusable, strings } = this.props;
    const { activeDescendantId } = this.state;
    const isNavigatedDate = compareDates(navigatedDate, day.originalDate);

    return (
       {
          this.props.customDayCellRef && this.props.customDayCellRef(element, day.originalDate, classNames);
          this._setDayCellRef(element, day, isNavigatedDate);
        }}
        aria-hidden={ariaHidden}
        onClick={day.isInBounds && !ariaHidden ? day.onSelected : undefined}
        onMouseOver={!ariaHidden ? this.onMouseOverDay(day) : undefined}
        onMouseDown={!ariaHidden ? this.onMouseDownDay(day) : undefined}
        onMouseUp={!ariaHidden ? this.onMouseUpDay(day) : undefined}
        onMouseOut={!ariaHidden ? this.onMouseOutDay(day) : undefined}

public render(): JSX.Element {
        const showLabel = !!this.props.labelText;
        const showHeader = !!this.props.headerText;
        const textContent = this.props.textContent;

        const classNames = css('assessment-instance-label', this.props.customClassName);

        return (
            <div>
                {showLabel ? (
                    <div style="{{">
                        {this.props.labelText}
                    </div>
                ) : null}
                <div>
                    
                        <div>
                            {showHeader ? <strong>{this.props.headerText} </strong> : null}
                            <div>{textContent}</div>
                        </div>
                    
                </div></div>

export const SimpleCardRow = NamedFC('SimpleCardRow', ({ label: givenLabel, content, rowKey, contentClassName }) => {
    const contentStyling = css(styles.instanceListRowContent, contentClassName);

    return (
        
            {givenLabel}
            {content}
        
    );
});

deps,
            buttonAriaLabel,
            containerAutomationId,
            containerClassName,
            header,
            id,
        } = props;

        const containerProps = { role: 'heading', 'aria-level': headingLevel };
        let contentWrapper = null;
        let collapsedCSSClassName = 'collapsed';

        const showContent = isExpanded || false;

        if (showContent) {
            contentWrapper = <div>{content}</div>;
            collapsedCSSClassName = null;
        }

        const onClick = (event: React.MouseEvent) =&gt; deps.cardSelectionMessageCreator.toggleRuleExpandCollapse(id, event);

        return (
            <div data-automation-id="{containerAutomationId}">
                <div>
                    </div></div>

return (
        <a>
      );
    } else {
      const buttonProps: React.HTMLAttributes =
        getNativeProps(this.props, buttonProperties);

      return (
        <button>
      );
    }
  }
</button></a>

private _onRenderChildren(): JSX.Element {
    const {
      children,
      onRenderIcon = this._onRenderIcon,
      onRenderText = this._onRenderText,
      onRenderChevron = this._onRenderChevron
    } = this.props;

    return (
      <div>
        { onRenderIcon(this.props, this._onRenderIcon) }
        { onRenderText(this.props, this._onRenderText) }
        { children }
        { onRenderChevron(this.props, this._onRenderChevron) }
      </div>
    );
  }