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

110

普里扬克·辛格（Priyank Deep Singh）

我想更改步进标签的字体大小以及标签和圆形之间的边距。默认情况下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>
     ```

山姆·R。

<StepLabel>在您的内部使用一个组件<Step>，然后通过查看StepLabel CSS文档来覆盖样式：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。