How to use the office-ui-fabric-react/lib/Utilities.css function in office-ui-fabric-react

public render(): JSX.Element {
        const isSafeForInnerHTML: boolean = this.props.isSafeForInnerHTML;
        const isTruncatedClassNameObj: any = {};
        isTruncatedClassNameObj[styles.isTruncated] = this.props.isTruncated;
        let text: string = this.props.text;
        if (isSafeForInnerHTML && this.props.isTruncated) {
            text += `<div style="background: linear-gradient(to bottom, transparent, ${(this.props.cssProps &amp;&amp; (this.props.cssProps.background || this.props.cssProps.backgroundColor)) || '#ffffff'} 100%)" class="${styles.truncate}"></div>`;
        }


        if (isSafeForInnerHTML) {
            return (<div style="{this.props.cssProps}"></div>);
        }
        else {
            return ();
        }
    }
}

<div role="application">
        <div>
          <div>
            <div>
              <div>
                {isDayPickerVisible &amp;&amp; (
                  </div></div></div></div></div>

<p>
                  Using Angular to build out your experience? The ngOfficeUIFabric project makes it easy to use Fabric in Angular-based
                  apps.
                </p>
                <p>
                  ngOfficeUIFabric is a community effort to build components for Angular-based apps. Watch the Channel 9 video,{' '}
                  <a href="https://channel9.msdn.com/Shows/Office-Dev-Show/Office-Dev-Show-Episode-25-Angular-Directives-for-Office-UI-Fabric">
                    Angular Directives for Office UI Fabric
                  </a>
                  , to learn more about the project.
                </p>
              
              <div>
                <img height="200" width="200" src="{'https://static2.sharepointonline.com/files/fabric/fabric-website/images/logo-angular-black.svg'}">
              </div>
            
          
        

        <div>
          <div>
            <div>
              <div>
                <span>Efficient and easy to use</span>
                <p></p></div></div></div></div>

return (
    <div aria-labelledby="{'selectedItemPersona-'" role="{'listitem'}" data-selection-index="{index}" data-is-sub-focuszone="{true}" data-is-focusable="{true}">
      <div hidden="{!canExpand">
        
      </div>
      <div>
        <div id="{'selectedItemPersona-'">
          
        </div>
        
      </div></div>

>
        <div>
          <div id="{monthAndYearId}" aria-atomic="true" aria-relevant="text" aria-live="polite">
            {this.props.onHeaderSelect ? (
              <div tabindex="{0}" role="button" aria-label="{dateTimeFormatter.formatMonthYear(navigatedDate,">
                {dateTimeFormatter.formatMonthYear(navigatedDate, strings)}
              </div>
            ) : (
              <div>
                {dateTimeFormatter.formatMonthYear(navigatedDate, strings)}
              </div>
            )}
          </div>
          <div>
            <div>
              </div></div></div>

public render(): JSX.Element {
        const isImageUrl: boolean = this.props.isImageUrl;

        if (isImageUrl) {
            return (<div style="{this.props.cssProps}"><img alt="{this.props.text}" src="{this.props.url}"></div>);
        }
        else {
            return ({this.props.text});
        }
    }

<div>
            <img alt="React logo" height="64" width="72" src="{'https://static2.sharepointonline.com/files/fabric/fabric-website/images/logo-react.svg'}">
            <span>Built with React</span>
            <span>Fabric’s robust, up-to-date components are built with React</span>
            <a href="#/components">
              See components
            </a>
          </div>
        

        <div>
          <div>
            <span>SharePoint</span>
            <span>
              New SharePoint experiences are built with Fabric and the SharePoint Framework comes with it baked in to make things simple.{' '}
              <a href="https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/use-fabric-react-components">
                Learn more
              </a>
            </span>
          </div>
          </div>

{!!(dos && donts) && (
          <div>
            <div>
              
                <h3>Do</h3>
                {dosUrl &amp;&amp; }
              
              <hr>
              {dos}
            </div>
            <div>
              
                <h3>Don’t</h3>
                {dontsUrl &amp;&amp; }
              
              <hr>
              {donts}
            </div>
          </div>
        )}
      
    );
  }

{strings.shortMonths.map((month, index) => {
                const indexedMonth = setMonth(navigatedDate, index);
                const isCurrentMonth = this._isCurrentMonth(index, navigatedDate.getFullYear(), today!);
                const isNavigatedMonth = navigatedDate.getMonth() === index;
                const isSelectedMonth = selectedDate.getMonth() === index;
                const isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear();
                const isInBounds =
                  (minDate ? compareDatePart(minDate, getMonthEnd(indexedMonth)) < 1 : true) &&
                  (maxDate ? compareDatePart(getMonthStart(indexedMonth), maxDate) < 1 : true);

                return (
                  <button type="button" data-is-focusable="{isInBounds" aria-selected="{isCurrentMonth" aria-label="{dateTimeFormatter.formatMonthYear(indexedMonth," disabled="{!isInBounds}" role="{'gridcell'}">
                    {month}</button>

{week.map((day, dayIndex) => {
                    const isNavigatedDate = compareDates(navigatedDate, day.originalDate);
                    return (