如何根据屏幕设计定制步进机？

Question

如何根据屏幕设计自定义步进器？

禁用的样式不起作用。完成的步骤应保持编号。活动圆不应有边界，否则直线不应接触圆点。子菜单必须为多行。高度必须适应。

我自定义了很多东西，但是这些要点不起作用。

import React from "react";
import {
  Step,
  StepConnector,
  StepContent,
  StepLabel,
  Stepper,
  makeStyles
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  root: {
    width: "100% !important"
  },
  stepper: {
    backgroundColor: "#3a4990"
  },
  connectorActive: {
    "& $connectorLine": {
      borderLeft: `2px solid #fff`,
      paddingBottom: 26,
      height: 100
    }
  },
  connectorCompleted: {
    "& $connectorLine": {
      borderLeft: `2px solid #fff`,
      paddingBottom: 26
    }
  },
  connectorDisabled: {
    "& $connectorLine": {
      borderLeft: `2px solid #fff`,
      paddingBottom: 26
    }
  },
  connectorLine: {
    transition: theme.transitions.create("border-color")
  },
  step: {
    height: 28
  },
  stepLabel: {
    alignItems: "center",
    "& svg": {
      border: `2px solid #fff`,
      borderRadius: "14px",
      backgroundColor: "#fff"
    },
    "& span:nth-child(2) span": {
      color: "#fff",
      fontSize: 18,
      letterSpacing: 0.23
    }
  },
  stepContent: {
    marginTop: 0,
    color: "#fff",
    borderLeft: `1px solid #fff`,
    display: "inline-block",
    paddingLeft: 25,
    "& div:nth-child(1)": {
      width: "90%",
      lineHeight: "30px"
    }
  },
  stepConnector: {
    padding: 0
  },
  stepIconColor: {
    "& $active": {
      color: "yellow"
    },
    "& $completed": {
      color: "green"
    },
    "& $disabled": {
      color: "red"
    }
  },
  active: {},
  completed: {},
  disabled: {},
  stepTitle: {
    display: "flex",
    justifyContent: "space-between"
  },
  submenu: {
    textDecoration: "underline"
  }
}));

function VerticalLinearStepper() {
  const classes = useStyles();
  const [activeStep, setActiveStep] = React.useState(0);

  function getSteps() {
    return [
      <div className={classes.stepTitle}>
        <span>Menu 1 - completed</span>
        <i className="icon-ic_arrow" />
      </div>,
      <div className={classes.stepTitle}>
        <span>Menu 2 - completed</span>
        <i className="icon-ic_arrow-right" />
      </div>,
      <div className={classes.stepTitle}>
        <span>Menu 3 - active</span>
        <i className="icon-ic_arrow-right" />
      </div>,
      <div className={classes.stepTitle}>
        <span>Menu 4 -disabled</span>
        <i className="icon-ic_arrow-right" />
      </div>
    ];
  }

  function getStepContent(step) {
    switch (step) {
      case 0:
        return "";
      case 1:
        return <span className={classes.submenu}>Submenu</span>;
      case 2:
        return (
          <span className={classes.submenu}>
            This submenu is quite long and multi-line
          </span>
        );
      case 3:
        return "";
      default:
        return "";
    }
  }

  const connector = (
    <StepConnector
      className={classes.stepConnector}
      classes={{
        active: classes.connectorActive,
        completed: classes.connectorCompleted,
        disabled: classes.connectorDisabled,
        line: classes.connectorLine
      }}
    />
  );

  const steps = getSteps();

  return (
    <div className={classes.root}>
      <Stepper
        activeStep={activeStep}
        connector={connector}
        orientation="vertical"
        className={classes.stepper}
      >
        {steps.map((label, index) => (
          <Step
            key={label}
            className={classes.step}
            classes={{
              root: classes.stepIconColor
            }}
            disabled
          >
            <StepLabel
              className={classes.stepLabel}
              icon={index + 1}
              StepIconProps={{
                classes: {
                  root: classes.stepIconColor,
                  active: classes.active,
                  completed: classes.completed,
                  disabled: classes.disabled
                }
              }}
            >
              {label}
            </StepLabel>

            <StepContent active className={classes.stepContent}>
              {getStepContent(index)}
            </StepContent>
          </Step>
        ))}
      </Stepper>
    </div>
  );
}

export default VerticalLinearStepper;

https://codesandbox.io/s/material-demo-jtg1s