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