【问题标题】: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}}>
      );
    }
    

    【讨论】:

      猜你喜欢
      • 2019-03-29
      • 2017-03-12
      • 2018-08-03
      • 2018-12-31
      • 2021-01-29
      • 1970-01-01
      • 2023-02-14
      • 2020-10-11
      • 2020-06-12
      相关资源
      最近更新 更多