title: Material-ui stepper connect dots with line
body: <p>I'm doing an implementation of material-ui steppers more specifically the "small dot stepper" and the challenge I'm facing at the moment is connecting the dots with a line. I tried by setting the StepConnector position to absolute but it does not behave that well when changing screens, does anyone know a solution to this?</p>
  
  <p>sandbox: <a href="https://op1l9.csb.app/" rel="nofollow noreferrer">https://op1l9.csb.app/</a></p>
  
  <p>Link to stepper in question:</p>
  
  <p><a href="https://material-ui.com/components/steppers/" rel="nofollow noreferrer">https://material-ui.com/components/steppers/</a></p>
  
  <p>Most of this code is already in the link I provided</p>
  
  <pre><code>import styles from "./styles";
  import {
      Paper,
      Grid,
      Typography,
      Stepper,
      Step,
      StepLabel,
      StepContent,
      StepConnector,
      makeStyles,
      withStyles,
  } from "@material-ui/core";
  import { MoreHoriz } from '@material-ui/icons'
  import PropTypes from "prop-types";
  import React from "react";
  
  const useQontoStepIconStyles = makeStyles({
      root: {
          color: '#2e5bff',
          display: 'flex',
          height: 28,
          marginLeft: 8,
          alignItems: 'center',
      },
      active: {
          color: '#2e5bff',
      },
      circle: {
          zIndex: 2,
          width: 8,
          height: 8,
          borderRadius: '50%',
          backgroundColor: 'currentColor',
      },
      completed: {
          color: '#2e5bff',
          zIndex: 1,
          fontSize: 18,
      },
    });
  
  function QontoStepIcon(props) {
      const classes = useQontoStepIconStyles();
  
      return (
        &lt;div
          className={classes.root}
        &gt;
          &lt;div style={{color: props.color}} className={classes.circle} /&gt;
        &lt;/div&gt;
      );
    }
  
    QontoStepIcon.propTypes = {
      active: PropTypes.bool,
      completed: PropTypes.bool,
    };
  
  const QontoConnector = withStyles({
      alternativeLabel: {
        top: 10,
        left: 'calc(-50% + 16px)',
        right: 'calc(50% + 16px)',
      },
      lineVertical: {
          height: 20
      },
      active: {
        '&amp; $line': {
          borderColor: '#2e5bff',
        },
      },
      completed: {
        '&amp; $line': {
          borderColor: '#2e5bff',
        },
      },
      line: {
        borderColor: '#eaeaf0',
        borderTopWidth: 3,
        borderRadius: 1,
      },
    })(StepConnector);
  
          &lt;Stepper orientation="vertical" connector={&lt;QontoConnector /&gt;}&gt;
              {steps.map((step, index) =&gt; (
                  &lt;Step key={step.label}&gt;
                      &lt;StepLabel
                          optional={&lt;Typography className={classes.description}&gt;{step.description}&lt;/Typography&gt;}
                          StepIconComponent={() =&gt; &lt;QontoStepIcon color={step.color}/&gt;}
                      &gt;
                          &lt;Typography className={classes.title}&gt;
                              {step.title}
                          &lt;/Typography&gt;
                      &lt;/StepLabel&gt;
                  &lt;/Step&gt;
              ))}
          &lt;/Stepper&gt;
  </code></pre>