Material-ui stepper 用线连接点

Question

我正在实现 material-ui 步进器，更具体地说是“小点步进器”，而我目前面临的挑战是将点与线连接起来。我尝试将 StepConnector 位置设置为绝对位置，但在更改屏幕时表现不佳，有人知道解决方案吗？

沙盒：https://op1l9.csb.app/

相关步进器的链接：

https://material-ui.com/components/steppers/

大部分代码已经在我提供的链接中

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 (
      <div
        className={classes.root}
      >
        <div style={{color: props.color}} className={classes.circle} />
      </div>
    );
  }

  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: {
      '& $line': {
        borderColor: '#2e5bff',
      },
    },
    completed: {
      '& $line': {
        borderColor: '#2e5bff',
      },
    },
    line: {
      borderColor: '#eaeaf0',
      borderTopWidth: 3,
      borderRadius: 1,
    },
  })(StepConnector);

        <Stepper orientation="vertical" connector={<QontoConnector />}>
            {steps.map((step, index) => (
                <Step key={step.label}>
                    <StepLabel
                        optional={<Typography className={classes.description}>{step.description}</Typography>}
                        StepIconComponent={() => <QontoStepIcon color={step.color}/>}
                    >
                        <Typography className={classes.title}>
                            {step.title}
                        </Typography>
                    </StepLabel>
                </Step>
            ))}
        </Stepper>

Answer 1

我通过使用 ::after 和 ::before 的伪元素解决了这个问题。它没有响应，但可以满足我的需求。