Material UI v1.0.0 Stepper 클래스를 오버라이드하여 아이콘 크기를 설정하는 방법

Question

이제 Material UI의 새 버전으로 마이그레이션 중입니다. 클래스를 재정의하는 방법을 조금 혼란스럽게 말해야합니다.

다른 레이블로 Stepper을 사용해야합니다.이 레이블은 저에게 적합하며 루트 배경을 재정 의하여 투명 배경을 설정할 수있었습니다.

하지만 필요한 것은 아이콘 크기를 42px로 설정하고 성공하지 못했습니다.

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>; 

    } 
} 

나는 내가 StepLabel 스타일을 가지고 있는지,하지만 내가 설정하려고 할 때 단지 루트 아이콘이 사라 COOR :

내 코드 보인다.

도움 주셔서 대단히 감사합니다.

Answer 1

스테퍼 아이콘 크기를 변경하는 유일한 방법은 transform: scale(scaleValue)으로 설정되어있는 것 같습니다. this codesandbox (demo.js 파일)을 확인하십시오. 아래 코드에 유의하십시오.

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>