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

Question

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

     ```

Answer 1

在您的内部使用一个<StepLabel>组件，然后通过查看StepLabel CSS 文档<Step>来覆盖样式：// Add thisimport 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>

Answer 2

如果想在 material-ui 中更改样式，您应该使用 withStyles。打字稿中的示例：import {&nbsp; createStyles,&nbsp; Theme,&nbsp; withStyles,&nbsp; Step} from "@material-ui/core";const CustomStep = withStyles((theme: Theme) =>&nbsp; createStyles({&nbsp; &nbsp; // Input your style here&nbsp; }))(Step);export default function Dashboard() {&nbsp; &nbsp;return (....)}