Javascript ReactJS：如何更改物料界面中步进标签的字体大小和边距？

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

以下是material ui中的代码沙盒代码：

{steps.map（（标签，索引）=>{
const stepProps={}；
常量按钮操作={}；
if（可选（索引））{
buttonProps.optional=可选；
}
如果（已跳过（索引））{
stepProps.completed=false；
}
返回(
{label}
);
})}
```

如果要在材质ui中更改样式，则应使用withStyles。typescript中的示例：

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 (....)
}

在

中使用

组件，然后通过查看以下内容覆盖样式：

//添加这个
从“@material ui/core/StepLabel”导入StepLabel；
const useStyles=makeStyles（（主题）=>({
//你的其他东西在这里
//加上这个
步骤\u标签\u根：{
fontSize:'10px'，
}
}));
//组件内部
//这里加上这个
{label}

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 (....)
}

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