How to use the @uifabric/styling.FontClassNames.medium function in @uifabric/styling

/>
              
                Refresh
              
            
          
          {/* summary-row-2 */}
          <div>
            <div>
              <div>Status</div>
              <div>
                
              </div>
            </div>
            <div>
              <div>Start Time</div>
              <div>
                {printDateTime(
                  DateTime.fromMillis(jobInfo.jobStatus.createdTime),
                )}
              </div>
            </div>
            <div>
              <div>User</div></div></div>

export const Badge = ({children, className}) => (
  <div>
    {children}
  </div>
);

className={c(
                FontClassNames.medium,
                ColorClassNames.neutralSecondary,
              )}
              style={{ marginBottom: spacing.s1 }}
            >
              Exit Type:
            
            <div>
              {`${jobRetry.exitType}`}
            </div>
          
          <div>
            <div style="{{">
              Diagnostics:
            </div>
            
              View Diagnostics
            
          </div>

<div style="{{">
            <span style="{{">Retry Index:</span>
            <span>{jobRetry.attemptIndex}</span>
          </div>
        
        
          <div>
            <div style="{{">
              Status:
            </div>
            
          </div>
          <div>
            <div style="{{"></div></div>

className={c(
            t.center,
            t.pa2,
            t.h3,
            t.w3,
            t.brPill,
            t.bgBlack,
            t.flex,
            t.justifyCenter,
            t.itemsCenter,
          )}
        >
          <img src="/assets/img/favicon.ico">
        
        <div style="{{">
          Sign in with your OpenPAI account
        </div>
        {error &amp;&amp; (
          {error}
        )}
        <form>
          <div>
            
          </div>
          <div>
            </div></form>

render() {
    const {loading, jobConfig, jobInfo, sshInfo} = this.state;
    if (loading) {
      return ;
    } else {
      return (
        <div>
          
          <summary>
          {
            jobInfo.taskRoles &amp;&amp; Object.keys(jobInfo.taskRoles).map((key) =&gt; (
               x.name === key)}</summary></div>

<div>
              <div>Start Time</div>
              <div>
                {printDateTime(
                  DateTime.fromMillis(jobInfo.jobStatus.createdTime),
                )}
              </div>
            </div>
            <div>
              <div>User</div>
              <div>
                {jobInfo.jobStatus.username}
              </div>
            </div>
            <div>
              <div>
                Virtual Cluster
              </div>
              <div>
                {jobInfo.jobStatus.virtualCluster}
              </div>
            </div>
            <div>
              <div>Duration</div>
              <div>
                {getDurationString(getJobDuration(jobInfo.jobStatus))}
              </div>
            </div>
            <div>
              <div>Retries</div>
              {this.checkRetryLink() ? (
                </div>

),
                        `${key}: ${val}`,
                      ]),
                    )}
                  
                
              
            )
          );
        },
      },
      {
        key: 'gpus',
        name: 'GPUs',
        className: FontClassNames.mediumPlus,
        headerClassName: FontClassNames.medium,
        minWidth: 40,
        maxWidth: 60,
        isResizable: true,
        onRender: item => {
          const gpuAttr = isNil(item.containerGpus)
            ? null
            : parseGpuAttr(item.containerGpus);
          if (isNil(gpuAttr)) {
            return null;
          } else if (gpuAttr.length === 0) {
            return <div>0</div>;
          } else {
            return (
              <div>
                </div>

getColumns() {
    const columns = [
      {
        key: 'number',
        name: 'No.',
        headerClassName: FontClassNames.medium,
        minWidth: 50,
        maxWidth: 50,
        isResizable: true,
        onRender: (item, idx) => {
          return (
            !isNil(idx) && (
              <div>{idx}</div>
            )
          );
        },
      },
      {
        key: 'name',
        name: 'Container ID',
        headerClassName: FontClassNames.medium,
        minWidth: 100,