[FIXED] How to access the index of a MaterialUI StepConnector

Issue

I am using a Stepper component, and I would like to style the connectors individually based on their index. The need to be able to access the index of the current step from within StepConnector came up in this GitHub issue in February, and a PR was accepted to make this easy with useStepContext. I'm using the current version of MaterialUI, 5.10.4.

However, I'm getting an empty object back instead of the context I'm expecting with the index. This happens with both approaches. The only difference I can see between what I'm doing and the sample code from the GitHub issue is that I'm on 5.10.4 and the sample is using 5.4.0. But perhaps I'm missing something?

Here is my code. The easy way:

import { useStepContext } from "@mui/material/Step/StepContext";
import StepConnector from "@mui/material/StepConnector";

function CIConnector(props) {
    const ctx = useStepContext();
    console.log("context:", ctx);

  return (
    <StepConnector />
  );
}

The hard way, suggested as a workaround in the original issue before the PR was accepted:

import * as React from "react";
import StepContext from "@mui/material/Step/StepContext";
import StepConnector from "@mui/material/StepConnector";

function CIConnector(props) {
    const ctx = React.useContext(StepContext);
    console.log("context:", ctx);

  return (
    <StepConnector />
  );
}

In this second version, when I break in the debugger, StepContext is undefined. But if I step into useContext(), it seems to correctly receive the StepContext object. Still, it's returning an empty object.

What am I doing wrong?

---

I have gotten a minimal test to fail too, so I have opened a bug with MUI.

Solution

The problem was the way I was importing the method. This code works on MaterialUI 5.10.17:

import { StepConnector, useStepContext } from "@mui/material/Step";

function CIConnector(props) {
    const ctx = useStepContext();
    console.log("context:", ctx);

  return (
    <StepConnector />
  );
}

Answered By - Nick K9
Answer Checked By - - David Marino (ReactFix Volunteer)