How to use the office-ui-fabric-react.FontClassNames function in office-ui-fabric-react

<dl>
                        <dt><span>Required</span></dt>
                        <dd></dd>
                        <dt><span><del>Disqualifying</del></span></dt>
                        <dd></dd>
                        <dt><span>Required</span></dt>
                        <dd></dd>
                        <dt><span><del>Disqualifying</del></span></dt>
                        <dd></dd>
                    </dl>
                
            )
        case TipType.ACTION_DELETE_INUSE:
            return (
                <div>
                    <h1></h1>
                    <p>There might be cases when you want to delete an action from your dialogs. In the picture below I would be deleting the action 'Will be removed'.</p>
                    <img alt="Action Placeholder" src="https://blisstorage.blob.core.windows.net/uiimages/actionDeletionBeforeRemoval.png">
                    <p>If the action is used you can choose between two types of deletion.</p>
                    <h2>Preserve Placeholder</h2>
                    <p></p>
                    <img alt="Action Placeholder" src="https://blisstorage.blob.core.windows.net/uiimages/actionDeletionPreservePlaceholders.png">
                    <h2>Remove Placeholder</h2>
                    <p></p></div>

render() {
        const { intl } = this.props
        return (
            
                <div>
                    <span>
                        
                    </span>
                </div>
                <div>
                    <div>
                         this.onGetNameErrorMessage(value)}
                            value={this.state.apiNameVal}
                        /&gt;
                        {!this.state.editingExisting &amp;&amp;
                            <div>
                                </div></div></div>

render: (logDialog, component) => {
                return <>
                    <span data-testid="log-dialogs-description">
                        {DialogUtils.dialogSampleInput(logDialog)}
                    </span>
                
            },
            getSortValue: logDialog =&gt; {

<div>
                        {Util.formatMessageId(this.props.intl, FM.TRANSCRIPT_VALIDATOR_PICKER_TITLE)} 
                    </div>
                
                <div>
                    <input style="{{" type="file"> this.onChangeTranscriptFiles(event.target.files)}
                        ref={ele =&gt; (this.transcriptFileInput = ele)}
                        multiple={true}
                    /&gt;
                     this.props.onGetNameErrorMessage(value)}
                        value={this.state.testName}
                    /&gt;
                    <div>
                         this.transcriptFileInput.click()}
                        /&gt;
                        </div></div>

            render: app =&gt; <span data-testid="model-list-last-modified-time">{Util.earlierDateOrTimeToday(app.lastModifiedDateTime)}</span>
        },

render() {
        if (!this.props.trainDialog) {
            return null;
        }

        const isLogDialog = (this.props.editType === EditDialogType.LOG_EDITED || this.props.editType === EditDialogType.LOG_ORIGINAL)
        const editTypeClass = this.props.editType === EditDialogType.IMPORT ? "import" : isLogDialog ? 'log' : 'train'
        const hasEndSession = DialogUtils.hasEndSession(this.props.trainDialog, this.props.actions)
        const renderData = DialogUtils.getDialogRenderData(this.props.trainDialog, this.props.entities, this.props.actions, this.state.roundIndex, this.state.scoreIndex, this.state.senderType)
        return (
            <div>
                <div>
                    <div data-testid="traindialog-title">
                        
                        {this.props.editType === EditDialogType.IMPORT
                            ? "Import"
                            : isLogDialog 
                            ? 'Log Dialog' 
                            : 'Train Dialog'}
                        {this.props.editType === EditDialogType.IMPORT &amp;&amp;
                            <div>
                                {`${this.props.importIndex} of ${this.props.importCount}`}
                            </div></div></div></div>

render() {
        const { intl } = this.props
        return (
            
                <div>
                    <div>
                        <div>
                            <div>
                                Log Dialog
                            </div>
                        </div>
                        <div data-testid="chat-session-modal-webchat">
                             {
                                    if (!this.state.hasChatActivity) {
                                        this.setState({ hasChatActivity: true })
                                    }
                                }}
                                onSelectActivity={() =&gt; { }}
                                hideInput={false}
                                focusInput={true}</div></div></div>

}

    const onClickExistingCondition = (theCondition: CLM.Condition) => {
        props.onClickCreate(theCondition)
    }

    const isOperatorDisabled = selectedEntityOption?.data.entityType === CLM.EntityType.ENUM
    const conditionsUsingEntity = props.conditions.filter(c => c.entityId === selectedEntityOption.key)
    const currentCondition = createConditionFromState()

    return 
        <div data-testid="condition-creator-modal-title">
            <span>
                {props.condition
                    ? 'Edit Condition'
                    : 'Create a Condition'}
            </span>
        </div>

        <div>
            <div>
                {entityOptions.length === 0
                    ? <p data-testid="condition-creator-modal-warning"> You may only create conditions on enum entities or those with resolver type number which is required. Your model does not have either type available. Please create either of these types of entities to create a condition.</p>
                    : &lt;&gt;
                        <h2 style="{{">Current Condition:</h2>
                        <div>
                            </div></div></div>

message={() => props.showValidationWarning &&
                <div>
                     Warning:&nbsp;
                    
                </div>}
        /&gt;

renderError(): React.ReactNode {
        if (this.state.errorCode) {
            return this.renderErrorCode()
        }
        else {
            return (
                <div>
                    {this.props.error.actionType &amp;&amp; <div>
                         Failed</div>}
                    <div>{this.props.error.title}</div>
                    {this.renderErrorBody()}
                    {this.state.customError &amp;&amp;
                        <div>{this.state.customError}</div>}
                </div>
            )
        }
    }
    render() {