How to customize Material-UI StepConnector

Question

I am trying to customize Material-UI StepConnector with classes, but it seems to not work.

I use material-ui 1.4.0

Here is how I try to do it.

       <Stepper
          connector={
            <StepConnector
              classes={{
                completed: { borderColor: "red" },
                line: { borderColor: "red" }
              }}
            />
          }
          activeStep={activeStep}
          orientation="vertical"
        >

Here is demo https://codesandbox.io/s/oxrw7ryy7z

As you can see the StepConnector color does not change at all.

Answer 1

The StepConnector doesn't have a complete class in v1.4.0, documentation for v1.4.0: https://v1-4-0.material-ui.com/api/step-connector/

If you want to change the color of the wole line try this:

// In your style
contentRoot: {
  borderColor: 'red',
},
connectorLine: {
  borderColor: 'red',
},

...

<StepConnector
   classes={{
     line: classes.connectorLine
   }}
/>
...
  <StepContent
     classes={{
       root: classes.contentRoot,
     }}
  >

Demo: https://codesandbox.io/s/p9wj1498yx

Answer 2

Add a new class in your styles:

connector: {
  borderLeft: "1px red solid"
}

And then use it in your component:

<StepConnector
  classes={{
    line: classes.connector
  }}
/>

The completed class does not appear to be a class that can be overriden in this version.