Material UI：如何在 React Material Ui Stepper 中更改标签的字体大小？答案

【问题标题】：Material UI: How to change font size of label in React Material Ui Stepper?Material UI：如何在 React Material Ui Stepper 中更改标签的字体大小？
【发布时间】：2021-01-20 01:17:36
【问题描述】：

在 React Material ui 中，我想更改步进标签的字体大小。如何做到这一点？

  function getSteps() {
    return [
      "OPTION 1",
      "OPTION 2",
      "OPTION 3"
      "OPTION 4"
     
    ];
  }

【问题讨论】：

标签： javascript reactjs react-native material-ui

【解决方案1】：

也许您可以在网页中添加自定义 CSS：

.MuiStepLabel-labelContainer span {
    font-size: xx-large;
}

您可以通过更改“font-size”值来调整为所需的字体大小。

【讨论】：

我没明白...你能解释一下
您可以将此 css 应用到您的 css 文件中以更改步进标签的字体大小。 Material UI 将使用“.MuiStepLabel-labelContainer”类生成步进标签。提到的自定义 css 将覆盖默认字体大小。

【解决方案2】：

在classes 属性中定位label CSS 规则名称

import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  customLabelStyle: {
    fontSize: "24px"
  }
});

function App () {
  const classes = useStyles();

  return (
    <StepLabel classes={{label: classes.customLabelStyle}}>
  );
}

【讨论】：