Vertical Steppers without Connectors using Material UI
Sep 3, 2018 · 1 min read
While Material UI is great, it certainly seems to be a WIP. Here is an example I found missing in the official docs
The CodeSandbox link below is based off of the original demo from the Material UI docs. I have highlighted the relevant code changes below as well.

const styles = theme => ({ .... iconContainer: { transform: 'scale(2)', marginRight: theme.spacing.unit * 5, }});
class VerticalLinearStepper extends React.Component {...render() {
...return (<div className={classes.root}>
<Stepper activeStep={activeStep} orientation="vertical" connector={false}>
{steps.map((label) => {
return (
<Step key={label} className={classes.step}>
<StepLabel classes={{
iconContainer: classes.iconContainer
}}>{label}
</StepLabel>
</Step>
);
})}
</Stepper>
<div>
<div>
<Button
disabled={activeStep === 0}
onClick={this.handleBack}
className={classes.button}
>
Back
</Button>
<Button
variant="contained"
color="primary"
onClick={this.handleNext}
className={classes.button}
>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</div>
</div>
</div>
);.....
Happy coding!