How to use the office-ui-fabric-react/lib/MessageBar.MessageBarType.info function in office-ui-fabric-react

render() {
    const { activeFiles, editorSettings, isSettingsView, theme } = this.props
    const { monacoTheme } = editorSettings
    const options = this.getMonacoOptions()
    const libraries = activeFiles.find(file => file.name === 'libraries.txt')

    return (
      <>
        
          
                {/* TODO: (nicobell) Figure out why MessageBarButtons didn't work (get
                styled properly) and if they have advantages regular buttons miss */}
                
                  Apply
                
                Cancel
                Reset
              
            }
            isMultiline={false}
            styles={{ root: { backgroundColor: '#333333', color: 'white' } }}
          >
            There are changes that have affected your settings. Click Apply to accept the
            changes or you may restore back to default settings with Restore.

{
          this.state.requestTab === RequestTab.body ? (
            this.state.requestType !== Methods.GET && this.state.requestType !== Methods.HEAD ? (
              
            ) : (
              
                Body not supported with GET/HEAD requests
              
            )
          ) : (
            <div>
              {
                this.state.customHeaders.map((ch: IHeader, index: number) =&gt; (
                  
                ))
              }
            </div>
          )
        }

        
           Store query

import { getType } from 'typesafe-actions'
import { MessageBarType } from 'office-ui-fabric-react/lib/MessageBar'

export interface IState {
  isVisible: boolean
  style: MessageBarType
  text: string
  link: {
    url: string
    text: string
  } | null
}

const defaultState: IState = {
  isVisible: false,
  style: MessageBarType.info,
  text: '',
  link: null,
}

const messageBarReducer = (
  state: IState = defaultState,
  action: IGistsAction | IMessageBarAction | ISolutionsAction | ISettingsAction,
): IState => {
  switch (action.type) {
    case getType(gists.create.success):
      return {
        isVisible: true,
        style: MessageBarType.success,
        text: `Your gist has been published at https://gist.github.com/${
          action.payload.gist.id
        }.`,

const ConfigureWebPart: React.SFC = (props) => {
  const {
    webPartContext,
    title,
    description,
    buttonText,
  } = props;
  return (
    <div>
      <div>{title}</div>
      <div>
        
          {description ? description : 'Please configure this web part\'s properties first.'}
        
      </div>
      <div>
         { e.preventDefault(); webPartContext.propertyPane.open(); }}&gt;
          {buttonText ? buttonText : 'Configure Web Part'}
        
      </div>
    </div>
  );
};

export interface IShowMessageBarParams {
  style?: MessageBarType;
  text: string;
  link?: {
    url: string;
    text: string;
  };
  button?: {
    text: string;
    action: { type: string; payload: any };
  };
}

const defaultState: IState = {
  isVisible: false,
  style: MessageBarType.info,
  text: '',
  link: null,
};

const messageBarReducer = (
  state: IState = defaultState,
  action:
    | IGistsAction
    | IMessageBarAction
    | ISolutionsAction
    | ISettingsAction
    | IEditorAction,
): IState => {
  switch (action.type) {
    case getType(gists.create.success):
      return {

const MessageBar = ({ isVisible, message, accept, acceptMessage, dismiss }: IProps) => (
  <div>
    
          
        </div>
      }
      onDismiss={dismiss}
    &gt;
      {message}
    
  
);

private onMessageClose() {
        this.props.actions.setMessageData({
            message: "",
            showMessage: false,
            type: MessageBarType.info
        });
    }
}