Material UI Stepper 4 Different Connector Color at 4 different steps

Question

I was wondering if it was possible to have multiple connector colors with a different one at each step. So the first connector would be blue the one after that would be green then yellow then red all while keeping the previous color the same. The closest have gotten changes all previous colors to the same color. Is there a way to keep the previous the same color?

The Example I linked only has connectors of one color

Example of Stepper with Connector only one color

Befeepilf · Answer 1 · 2020-07-08T18:11:00.743

This answer shows how to change the color of individual `StepIcon`s

Given that you have a function outside the component rendering the Stepper that returns an array containing the step labels and their corresponding icon color:

function getStepLabels() {
  return [
    {
      label: "Select campaign settings",
      color: "red"
    },
    {
      label: "Create an ad group",
      color: "blue"
    },
    {
      label: "Create an ad",
      color: "green"
    }
  ];
}

you can generate classes for each label icon using material-ui's Hook API via the makeStyles function (if you are using a class component you might want to take a look at the withStyles function):

const useIconStyles = makeStyles(
  (() => {
    return getStepLabels().reduce((styles, step, index) => {
      styles[index] = { color: `${step.color} !important` };
      return styles;
    }, {});
  })()
);

and add the generated hook to your component: const iconClasses = useIconStyles();

When rendering the stepper you can make use of the generated classes like this:

[...]

<Step key={label} {...stepProps}>
    <StepLabel
        {...labelProps}
         StepIconProps={{ classes: { root: iconClasses[index] } }}
    >
         {label}
    </StepLabel>
</Step>

[...]

Here is a working example:

Thanks for answering! I edited my post to have an image of the connectors which I think should give a better idea of what I am asking as I do not want to change the Icons but the line connecting the Icons — Swinnerton Dyer, Jul 08 '20 at 17:26

score 0 · Answer 2 · answered Jul 08 '20 at 18:54

If you take a closer look at the render output of the Stepper component you will notice that StepLabel and StepConnector are sibling components. This means you can select a specific connector with the CSS :nth-child() pseudo-class. If you want to select the connector after the first step's label you would use the selector :nth-child(2). For the connector after second step's label it would be :nth-child(4).

If you have an array of step labels like this:

[
  {
    label: "First label",
    connectorColor: "red"
  },
  {
    label: "Second label",
    connectorColor: "green"
  },
  {
    label: "Third label"
  }
];

you can pass this array to a material-ui style hook created by the makeStyles function and dynamically generate all the different CSS selectors necessary to style each connector:

const useConnectorStyles = makeStyles({
  stepConnector: steps => {
    const styles = {};

    steps.forEach(({ connectorColor }, index) => {
      if (index < steps.length - 1) {
        styles[`&:nth-child(${2 * index + 2})`] = { color: connectorColor };
      }
    });

    return styles;
  },
  stepConnectorLine: {
    borderColor: "currentColor"
  }
});

Now use the generated style hook in your component: const connectorClasses = useConnectorStyles(stepLabels); and provide the connector prop to the Stepper component:

connector={
    <StepConnector
        classes={{
            root: connectorClasses.stepConnector,
            line: connectorClasses.stepConnectorLine
        }}
    />
}

Here is a working example:

Material UI Stepper 4 Different Connector Color at 4 different steps

2 Answers2

This answer shows how to change the color of individual StepIcons

This answer shows how to change the color of individual `StepIcon`s