StepIcon

src/components/layout/stepper/ApplicationStepper.js

@@ -10,7 +10,7 @@ import {
 } from "@material-ui/core";
 import { useLocation, useHistory } from "react-router-dom";
 import CustomStepConnector from "./CustomStepConnector";
-import ColorlibStepIcon from "./ColorlibStepIcon";
+import StepIcon from "./StepIcon";
 
 const styles = () => ({
   stepperCard: {
@@ -56,9 +56,7 @@ const ApplicationStepper = () => {
               disabled={step.disabled}
               onClick={() => handleStepClick(step)}
             >
-              <StepLabel StepIconComponent={ColorlibStepIcon}>
+              <StepLabel StepIconComponent={StepIcon}>{step.title}</StepLabel>
-                {step.title}
-              </StepLabel>
             </StepButton>
           </Step>
         ))}

src/components/layout/stepper/StepIcon.js

@@ -29,7 +29,7 @@ const useColorlibStepIconStyles = makeStyles({
   }
 });
 
-function ColorlibStepIcon(props) {
+function StepIcon(props) {
   const classes = useColorlibStepIconStyles();
   const { active, completed } = props;
 
@@ -55,7 +55,7 @@ function ColorlibStepIcon(props) {
   );
 }
 
-ColorlibStepIcon.propTypes = {
+StepIcon.propTypes = {
   /**
    * Whether this step is active.
    */
@@ -70,4 +70,4 @@ ColorlibStepIcon.propTypes = {
   icon: PropTypes.node
 };
 
-export default ColorlibStepIcon;
+export default StepIcon;