Material UI v1.0.0 how to override Stepper classes to set icon size

Question

I am now migrating to new version of Material UI. I have to say that i am little bit confused how to override classes.

I need use Stepper with alternative label, it works for me, I was able to override root classes to set transparent background.

But What I need is set step icon size to 42px and I am not successful.

My code looks:

    const styles = {
        root: {
            backgroundColor: "rgba(255, 0, 0, 0)",
        }
    };

    const MyStepper = (props) => {
        return (
            <Stepper
                activeStep={props.activeStep}
                alternativeLabel
                classes={{
                    root: props.classes.root,               
                }}
            >
                {props.children}
            </Stepper>        
        );
    }

    const StyledStepper = withStyles(styles)(MyStepper);

    export default class CheckoutStepper extends React.PureComponent<ICheckoutStepperProps, {}> {

    public render() {

        return <div >
            <StyledStepper
                activeStep={this.props.step}
                >
                <Step>
                    <StepLabel>
                        {stepTable[0].label}
                    </StepLabel>
                </Step>
                <Step>
                    <StepLabel>
                        {stepTable[1].label}
                    </StepLabel>
                </Step>
                <Step >
                    <StepLabel>{stepTable[2].label}</StepLabel>
                </Step>
                <Step>
                    <StepLabel>{stepTable[3].label}</StepLabel>
                </Step>
            </StyledStepper>
        </div>;

    }
}

I am sure that i have to style StepLabel, but when I tried set just coor to root icons disappear.

Thanks very much for your help.

Answer 1

It looks like that the only way to change stepper icons size is set transform: scale(scaleValue). Check this codesandbox (demo.js file). Pay attention to the code below:

const styles = theme => ({
  root: {
    width: '90%',
  },
  backButton: {
    marginRight: theme.spacing.unit,
  },
  instructions: {
    marginTop: theme.spacing.unit,
    marginBottom: theme.spacing.unit,
  },
  iconContainer: { // define styles for icon container
    transform: 'scale(2)',
  }
});

...

<Stepper activeStep={activeStep} alternativeLabel>
  {steps.map((label, index) => {
    return (
      <Step key={label}>
        <StepLabel classes={{ // apply this style
          iconContainer: classes.iconContainer
        }}>{label}</StepLabel>
      </Step>
    );
  })}
</Stepper>