Блог

Я пытаюсь реализовать StepConnector в виде точек в Material-UI stepper. Проблема в том, что когда шаг активен, StepConnector рядом с StepContent не превращается в точки. Я использую BorderStyle: ‘dots’ для переопределения stepConnector. Я предоставляю ссылку codesandbox ниже. Я не понимаю, почему скриншот не загружается. Пожалуйста, скопируйте и вставьте приведенный ниже код в codesandbox, чтобы получить пользовательский интерфейс. Извините за беспокойство. Любая помощь была бы действительно заметной. Заранее спасибо.

Скриншот

https://codesandbox.io/s/lmb2b?file=/demo.tsx

 import React from 'react';
import {
  makeStyles,
  Theme,
  createStyles,
  withStyles,
} from '@material-ui/core/styles';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import StepContent from '@material-ui/core/StepContent';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import { StepIconProps } from '@material-ui/core/StepIcon';
import StepConnector from '@material-ui/core/StepConnector';

const QontoConnector = withStyles({
  alternativeLabel: {
    top: 10,
    left: 'calc(-50%   16px)',
    right: 'calc(50%   16px)',
  },
  active: {
    'amp; $line': {
      borderColor: '#784af4',
      borderStyle: 'solid',
    },
  },
  completed: {
    'amp; $line': {
      borderColor: '#784af4',
      borderStyle: 'solid',
    },
  },
  line: {
    borderColor: '#d5d5da',
    borderTopWidth: 3,
    borderRadius: 1,
    borderStyle: 'dashed',
    width: 1,
    borderLeft: -1,
  },
  // lineVertical: {
  //   borderLeftStyle: 'dashed',
  //   borderLeftWidth: 1,
  //   minHeight: 24,
  // },
})(StepConnector);

const useQontoStepIconStyles = makeStyles({
  root: {
    color: '#eaeaf0',
    display: 'flex',
    height: 22,
    alignItems: 'center',
  },
  active: {
    color: '#784af4',
  },
  circle: {
    width: 8,
    height: 8,
    borderRadius: '50%',
    backgroundColor: 'currentColor',
  },
  completed: {
    color: '#784af4',
    zIndex: 1,
    fontSize: 18,
  },
});

function QontoStepIcon(props: StepIconProps) {
  const classes = useQontoStepIconStyles();
  const { active, completed } = props;

  return (
    <div
      className={clsx(classes.root, {
        [classes.active]: active,
      })}
    >
      {completed ? (
        <Check className={classes.completed} />
      ) : (
        <div className={classes.circle} />
      )}
    </div>
  );
}

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      width: '100%',
    },
    button: {
      marginTop: theme.spacing(1),
      marginRight: theme.spacing(1),
    },
    actionsContainer: {
      marginBottom: theme.spacing(2),
    },
    resetContainer: {
      padding: theme.spacing(3),
    },
    last: {
      borderLeft: '10px',
    },
  })
);

function getSteps() {
  return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
}

function getStepContent(step: number) {
  switch (step) {
    case 0:
      return `For each ad campaign that you create, you can control how much
          you're willing to spend on clicks and conversions, which networks
          and geographical locations you want your ads to show on, and more.`;
    case 1:
      return 'An ad group contains one or more ads which target a shared set of keywords.';
    case 2:
      return `Try out different ad text to see what brings in the most customers,
          and learn how to enhance your ads using features like ad extensions.
          If you run into any problems with your ads, find out how to tell if
          they're running and how to resolve approval issues.`;
    default:
      return 'Unknown step';
  }
}

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

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep   1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleReset = () => {
    setActiveStep(0);
  };

  return (
    <div className={classes.root}>
      <Stepper
        activeStep={activeStep}
        connector={<QontoConnector />}
        orientation='vertical'
      >
        {steps.map((label, index) => (
          <Step key={label}>
            <StepLabel>
              {label}
              <br />
            </StepLabel>
            <StepContent
              classes={{
                last: classes.last,
              }}
            >
              <Typography>{getStepContent(index)}</Typography>
              <div className={classes.actionsContainer}>
                <div>
                  <Button
                    disabled={activeStep === 0}
                    onClick={handleBack}
                    className={classes.button}
                  >
                    Back
                  </Button>
                  <Button
                    variant='contained'
                    color='primary'
                    onClick={handleNext}
                    className={classes.button}
                  >
                    {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
                  </Button>
                </div>
              </div>
            </StepContent>
          </Step>
        ))}
      </Stepper>
      {activeStep === steps.length amp;amp; (
        <Paper square elevation={0} className={classes.resetContainer}>
          <Typography>All steps completed - youamp;apos;re finished</Typography>
          <Button onClick={handleReset} className={classes.button}>
            Reset
          </Button>
        </Paper>
      )}
    </div>
  );
}