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

Posted 2023-02-22

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

【英文标题】：ReactJS: How to change font size and marginTop of stepper label in Material UI?

【发布时间】：2021-01-29 14:29:29

【问题描述】：

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

这是 Material 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>
     ```

【参考方案1】：

如果想在 material-ui 中更改样式，您应该使用 withStyles。打字稿中的示例：

import 
  createStyles,
  Theme,
  withStyles,
  Step
 from "@material-ui/core";

const CustomStep = withStyles((theme: Theme) =>
  createStyles(
    // Input your style here
  )
)(Step);

export default function Dashboard() 
   return (....)

【参考方案2】：

在<Step> 中使用<StepLabel> 组件，然后通过查看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>