Merge pull request #1563 from Rajesh-Nagarajan-11/fix-stepper

 fix(Stepper): use slots API for custom step icons and fix alignment (MUI v9)

Author: banana-three-join

src/custom/Stepper/index.tsx

@@ -112,6 +112,10 @@ function ColorlibStepIcon(props: ColorlibStepIconPropsI) {
   );
 }
 
+const stepLabelSlots = {
+  stepIcon: ColorlibStepIcon
+};
+
 const CustomizedStepper: React.FC<CustomizedStepperPropsI> = ({
   stepLabels,
   activeStep,
@@ -122,6 +126,13 @@ const CustomizedStepper: React.FC<CustomizedStepperPropsI> = ({
 }) => {
   const theme = useTheme();
 
+  const stepLabelSlotProps = useMemo(
+    () => ({
+      stepIcon: { icons } as Partial<ColorlibStepIconPropsI>
+    }),
+    [icons]
+  );
+
   return (
     <Stack data-testid={testId}>
       <Stack
@@ -135,12 +146,14 @@ const CustomizedStepper: React.FC<CustomizedStepperPropsI> = ({
           activeStep={activeStep}
           connector={<ColorlibConnector />}
           data-testid="stepper-container"
+          sx={{ flex: 1 }}
         >
           {stepLabels.map((label, index) => (
             <Step key={label} data-testid={`step-${index}`}>
               <StyledStepLabel
                 data-testid={`step-label-${index}`}
-                StepIconComponent={(props) => <ColorlibStepIcon {...props} icons={icons} />}
+                slots={stepLabelSlots}
+                slotProps={stepLabelSlotProps}
               >
                 {label}
               </StyledStepLabel>