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

let thumbnailHeight: number = Math.min(this._rowHeight, item.height);

    // Resize the picture with the same aspect ratio
    let thumbnailWidth: number = thumbnailHeight * ratio;

    const searchResultAltText: string = strings.SearchResultAlt.replace('{0}', query);
    return (
      <div style="{{">
        <div style="{{" data-selection-index="{index}" data-is-focusable="{true}" aria-label="{searchResultAltText}">
          <div data-selection-invoke="{true}">
            <img height="{thumbnailHeight}" width="{thumbnailWidth}" alt="{searchResultAltText}" src="{item.thumbnailUrl}">
            <div></div>
            <div data-automationid="CheckCircle" data-selection-toggle="{true}" data-item-index="{index}" aria-checked="{isSelected}" role="checkbox">
              
            </div>
            <div></div></div></div></div>

slidesToScroll: 3
          }
        },
        {
          breakpoint: 801,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        }
        // there is no 1 slide option, as it converts to narrow view
      ]
    };

    return (
      <div>
         (this._slider = c)} {...settings}&gt;
          {this.props.children}
        
        <div style="{{"> this._slider.slickPrev()}
        &gt;
          
        </div>
        </div>

// there is no 1 slide option, as it converts to narrow view
      ]
    };

    return (
      <div>
         (this._slider = c)} {...settings}&gt;
          {this.props.children}
        
        <div style="{{"> this._slider.slickPrev()}
        &gt;
          
        </div>
        <div style="{{"> this._slider.slickNext()}
        &gt;
          
        </div>
      </div>
    );
  }

private _onRenderCell = (item: IRecentFile, index: number | undefined): JSX.Element => {
    let isSelected: boolean = false;

    if (this._selection && index !== undefined) {
      isSelected = this._selection.isIndexSelected(index);
    }

    return (
      <div role="{&quot;gridCell&quot;}">
        <div style="{{" data-automationid="ItemTile" data-item-index="{index}" data-selection-invoke="true" data-selection-index="{index}" data-is-focusable="true" data-is-draggable="false" aria-selected="{isSelected}" role="link">
          <div>
            <div>
              <div></div></div></div></div></div>

private _renderHeader = (): JSX.Element => {
    return <div><p role="heading">{strings.FilePickerHeader}</p></div>;
  }

<div>
         (this._slider = c)} {...settings}&gt;
          {this.props.children}
        
        <div style="{{"> this._slider.slickPrev()}
        &gt;
          
        </div>
        <div style="{{"> this._slider.slickNext()}
        &gt;
          
        </div>
      </div>
    );
  }
}

className={css(styles.indexButtonContainer, styles.sliderButtons)}
          style={{ left: "10px" }}
          onClick={() => this._slider.slickPrev()}
        >
          
        
        <div style="{{"> this._slider.slickNext()}
        &gt;
          
        </div>
      
    );
  }
}