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

const error = checkEmail(email);
    if (error) {
      setError(error);
      return;
    }
    setProcessing(true);
    onEditProfile({ email }).finally(() => setProcessing(false));
  });

  return (
    <div>
      {/* summary left */}
      <div>
        <div>
          <div style="{{">
            {userInfo.username}
          </div>
          <div>
            
              <div>{userInfo.admin ?  : }</div>
            
          </div>
        </div></div></div>

className={c(
        t.w33L,
        t.w100,
        t.mt0L,
        t.mt5,
        t.tc,
        t.ph4,
        t.flex,
        t.flexColumn,
        t.itemsCenter,
        t.justifyBetween,
      )}
    >
      <div>
        <div style="{{">
          Understand Job
        </div>
        <div style="{{">
          The job of OpenPAI defines how to execute command(s) in specified
          environment(s). A job can be model training, other kinds of commands,
          or distributed on multiple servers.
        </div>
      </div>

public render() {
    const persona = <span>&nbsp;</span>;

    return <div>
      <div>
        <div>
          Graph UI
        </div>
        <div>
          {persona}
        </div>
      </div>
    </div>;
  }
}

secondaryText={this.props.email}
        imageUrl={this.props.imageUrl}
        getStyles={this.getPersonaStyles}
      />)
      : (<span>&nbsp;</span>);

    return <div>
      <div>
        <div>
          Graph UI
        </div>
        <div>
          {persona}
        </div>
      </div>
    </div>;
  }

const Bottom = () => (
  <div>
    <div>
      <div>
        <div style="{{">
          Submit a hello-world job
        </div>
        <div style="{{">
          With submitting a hello-world job, this section introduces more
          knowledge about job, so that you can write your own job configuration
          easily.
        </div>
      </div>
      </div></div>