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

Posted 2023-02-22

【中文标题】Material UI v1.0.0 如何覆盖 Stepper 类来设置图标大小

【英文标题】：Material UI v1.0.0 how to override Stepper classes to set icon size

【发布时间】：2018-05-27 02:37:09

【问题描述】：

我现在正在迁移到新版本的 Material UI。我不得不说我有点困惑如何覆盖类。

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

但我需要将步骤图标大小设置为 42 像素，但我没有成功。

我的代码看起来：

    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 到根图标时消失了。

非常感谢您的帮助。

【参考方案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>

【讨论】：

codesandbox 链接似乎已损坏。对我来说，当我这样做时，连接点的线与点重叠。