How to use the @patternfly/react-core.TextVariants.h2 function in @patternfly/react-core

<div>
            <div>
              <div>
                {this.getChart(ChartTheme.light.green)}
              </div>
              <div>
                {this.getlegend(ChartTheme.light.green)}
              </div>
            </div>
          </div>
        
        
          
          <div>
            <div>
              {this.getChart(ChartTheme.light.multi)}
            </div>
            <div>
              {this.getlegend(ChartTheme.light.multi)}
            </div>
          </div>
        
      
    );
  }
}

render() {
    const {carregando, eventos}  = this.state;
    return ( 
      
        
          
              
            
        
        
          {carregando ? 
             :
            
                {eventos.map((evento, i) => (
                  
                     this.selecionaEvento(evento)} className="pf-c-card-eventos"> 
                      {evento.nome}
                      
                      
                      {evento.inscricoesAbertas  ? 
                            Inscrições Abertas : 
                            Inscrições Fechadas  
                      }

renderHealthTooltip(health: H.Health) {
    return (
      
        
        
      
    );
  }

render() {
    return (
      
        
          
          <div>{this.getHeatMap(ChartTheme.light.blue)}</div>
        
        
          
          <div>{this.getHeatMap(ChartTheme.light.multi)}</div>
        
      
    );
  }
}

i18nCancel,
  onCancel,
  onBack,
  onNext,
  cancelHref,
  backHref,
  nextHref,
  isNextLoading,
  isNextDisabled,
  isLastStep = false,
}: ICreateViewHeaderProps) => {
  return (
    
      
        
          
        
      
      
      
        {step === 2 && (

render() {
    return (
      
        
          
          <div>{this.getHeatMap(ChartTheme.light.blue)}</div>
        
        
          
          <div>{this.getHeatMap(ChartTheme.light.multi)}</div>
        
      
    );
  }
}

const name = this.props.name;
    const status = this.props.status;
    const nbItems =
      status.inError.length + status.inWarning.length + status.inSuccess.length + status.notAvailable.length;
    let text: string;
    if (nbItems === 1) {
      text = switchType(this.props.type, '1 Application', '1 Service', '1 Workload');
    } else {
      text = nbItems + switchType(this.props.type, ' Applications', ' Services', ' Workloads');
    }
    const mainLink = {text};
    if (nbItems === status.notAvailable.length) {
      return (
        <>
          {mainLink}
          
        
      );
    }
    return (
      <>
        {mainLink}
        
        <div style="{{">
          </div>

export const SelectedConnectionTables: React.FunctionComponent = props => {
  return (
    
      
        
          
        
      
      
        {props.selectedSchemaNodesLength === 0 ? (
          
            
              
              <title size="lg">
                {props.i18nTablesSelected}
              </title>
              
                {props.i18nEmptyTablePreview}

trafficPolicy() {
    const destinationRule = this.props.destinationRule;
    const hasTrafficPolicy = !!destinationRule.spec.trafficPolicy;

    return (
      
        
          
            
            
              
                {hasTrafficPolicy ? (
                  
                ) : (
                  
                )}
              
            
          
        
      
    );
  }

render() {
    return (
      
        
          
          <div>{this.getChart(ChartTheme.light.blue)}</div>
        
        
          
          <div>{this.getChart(ChartTheme.light.multi)}</div>
        
      
    );
  }
}