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

Answer 2

如果想在 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 (....)

}