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的样式，但是当我尝试设置时，只需将root图标消失。

非常感谢你的帮助。

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>

Material UI v1.0.0如何覆盖Stepper类来设置图标大小

1 个答案: