ReactJS：如何在Material UI中更改步进标签的字体大小和marginTop？

问题描述

我想更改步进标签的字体大小以及标签和圆形之间的边距。默认情况下marginTop为16px，我想减小它。有什么办法吗？

这是材料ui中的CodesandBox代码： https://codesandbox.io/s/tnpyj?file=/demo.js:0-6101

      <Stepper alternativeLabel nonLinear activeStep={activeStep}>
        {steps.map((label,index) => {
          const stepProps = {};
          const buttonProps = {};
          if (isstepOptional(index)) {
            buttonProps.optional = <Typography variant="caption">Optional</Typography>;
          }
          if (isstepSkipped(index)) {
            stepProps.completed = false;
          }
          return (
            <Step key={label} {...stepProps}>
              <StepButton
                onClick={handleStep(index)}
                completed={isstepComplete(index)}
                {...buttonProps}
              >
                {label}
              </StepButton>
            </Step>
          );
        })}
      </Stepper>
     ```

解决方法

在<StepLabel>内使用<Step>组件，然后通过查看StepLabel CSS documentation覆盖样式：

// Add this
import StepLabel from '@material-ui/core/StepLabel';


const useStyles = makeStyles((theme) => ({
  // your other stuff here
  
  // Add this
  step_label_root: {
    fontSize: '10px',}
}));


// within the component

<Step key={label} {...stepProps}>
  <StepButton
    onClick={handleStep(index)}
    completed={isStepComplete(index)}
    {...buttonProps}>
    <StepLabel classes={{ label: classes.step_label_root }}> // HERE add this
      {label}
    </StepLabel>
  </StepButton>
</Step>

,

如果要在material-ui中进行样式更改，则应使用withStyles。打字稿中的示例：

  String x = getValue(42,toString: true); // Add `as String` if you disable downcasts.
  int y = getValue(42); // And `as int` here.