Hi My Objective is to not to give space between the step and connector. i've tried everyway but still i couldn't figure out.
By Default we're getting the space in between the step icon and connector. but i don't want to show space in between them.
I tried to give margin and all but still i couldn't remove space between the connector and step icon.
Here is my sample code:
const styles = (theme) => ({
root: {
width: "90%"
},
button: {
marginTop: theme.spacing.unit,
marginRight: theme.spacing.unit
},
actionsContainer: {
marginBottom: theme.spacing.unit * 2
},
resetContainer: {
padding: theme.spacing.unit * 3
},
contentRoot: {
borderColor: "red"
},
connectorLine: {
borderColor: "red"
}
});
<div className={classes.root}>
<Stepper
connector={
<StepConnector
classes={{
line: classes.connectorLine
}}
/>
}
activeStep={activeStep}
orientation="vertical"
>
{steps.map((label, index) => {
return (
<Step key={label}>
<StepLabel>{label}</StepLabel>
<StepContent
classes={{
root: classes.contentRoot
}}
>
<Typography>{getStepContent(index)}</Typography>
<div className={classes.actionsContainer}>
<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>
</StepContent>
</Step>
);
})}
</Stepper>
{activeStep === steps.length && (
<Paper square elevation={0} className={classes.resetContainer}>
<Typography>All steps completed - you"re finished</Typography>
<Button onClick={this.handleReset} className={classes.button}>
Reset
</Button>
</Paper>
)}
</div>
```
[here is sample o/p](https://codesandbox.io/s/material-demo-forked-r4pe2?file=/demo.js:2300-4152).
Can anyone help me with this query?
Thanks! in advance
You need to override alternativeLabel in StepConnector component. To achieve this goal, create a new Customized StepConnector e.g. called CustomizedConnector as below and then override the alternativeLabel to reduce the gap between connector and icon:
const CustomizedConnector = withStyles({
// this attribute will reduce the gap. change 7px to whatever value that fit your design
alternativeLabel: {
top: 10,
left: "calc(-50% + 7px)",
right: "calc(50% + 7px)"
},
/* other style attributes */
/* other style attributes */
/* other style attributes */
})(StepConnector);