ReactJS：如何在 Material UI 中更改步進器標簽的字體大小和 marginTop？

Question

我想更改步進器標簽的字體大小以及標簽和圓圈之間的邊距。 默認 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>
     ```

Answer 1

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

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