Vertical Steppers without Connectors using Material UI

Nikhil John
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.

Final Product
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!

Nikhil John

Written by

Tips and tricks on Travelling and Web Engineering because I’m a Travelling Web Engineer!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade