Material UI v1.0.0如何覆盖Stepper类以设置图标大小 [英] Material UI v1.0.0 how to override Stepper classes to set icon size

问题描述

我现在正在迁移到新版本的Material UI.我不得不说，我有点困惑如何重写类.

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

我需要使用带有替代标签的 Stepper ，它对我有用，我能够覆盖根类以设置透明背景.

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

但是我需要将步骤图标大小设置为42px，但我不成功.

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

我的代码如下:

    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图标设置为coor时就会消失.

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

非常感谢您的帮助.

推荐答案

似乎更改步进图标大小的唯一方法是设置 transform:scale(scaleValue).选中此codeandbox ( demo.js 文件).请注意以下代码:

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>

这篇关于Material UI v1.0.0如何覆盖Stepper类以设置图标大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！