gistfile1.txt

import React from 'react';
import { createStyles, makeStyles, Stepper, Theme } from '@material-ui/core';
import { StepperProps } from '@material-ui/core/Stepper';

import FanStepperConnector from '../FanStepperConnector';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    stepperContainer: {
      padding: 0,
      marginBottom: 20,
    },
    stepTitle: {
      fontSize: 21,
      fontWeight: 700,
      color: theme.palette.primary.main,
      textAlign: 'center',

      [theme.breakpoints.up('md')]: {
        display: 'none',
      },
    }
  }),
);

const FanStepper: React.FunctionComponent<StepperProps> = (props) => {
  const classes = useStyles();
  const {children, activeStep} = props;  
  let currentTitile: string | null = null;

 if (children && activeStep) {
  if (activeStep < children.length && activeStep >= 0) {
    currentTitile = children[activeStep].key;
  }
 }

  return (
    <>
    <Stepper
      alternativeLabel
      className={classes.stepperContainer}
      connector={FanStepperConnector}
      {...props}
    />
    { 
      currentTitile ?
      <div className={classes.stepTitle}>
        {currentTitile}
      </div>
    : null
    }
 
    </>
  );
};

FanStepper.displayName = 'FanStepper';

export default FanStepper;