Question

我试图弄清楚如何使用Material UI v1步进器进行反应，并使用我自己的字体大小。

标准示例在此span类中强制使用字体大小：MuiTypography-body1-99

我尝试将fontSize属性添加到const中的标签和MuiTypography类中：

const styles = theme => ({
  root: {
    width: '80%',
    marginLeft: '10%',
    marginTop: '50px',

  },
  button: {
    marginTop: theme.spacing.unit,
    marginRight: theme.spacing.unit,
  },
  actionsContainer: {
    marginBottom: theme.spacing.unit * 2,
  },
  resetContainer: {
    padding: theme.spacing.unit * 3,
  },
  label: {
      fontSize: '50%',
  },
  Typography: {
    fontSize: '87%',
  }

我无法在UI主题中使用类的名称向const样式添加类，因为连字符未被识别。

我无法将fontSize属性直接添加到页面上的Typography和content元素中（它给出了一个错误，指出fontSize未定义）。

<StepContent fontSize='120%'>
<Typography fontSize='120%'>{getStepContent(index)}</Typography>

如何使用步进器设置fontSize？

Answer 1

如果我理解你的问题，你想设置Stepper字体大小，以便StepLabel或StepContent具有特定的字体大小。

这可以通过使用StepLabel和StepContent组件都具有的style属性来完成。

例如：

<Stepper>
  <Step>
    <StepLabel
      style={{ fontSize: '150%', color: '#f00' }}
    >
        Create an ad
     </StepLabel>
    <StepContent
     style={{ fontSize: '120%', color: 'hotpink' }}
     >
          <p>
            For each ad campaign that you create, you can control how much
            you're willing to spend on clicks and conversions, which networks
            and geographical locations you want your ads to show on, and more.
          </p>
    </StepContent>
  </Step>
</Stepper>

希望能回答你的问题

使用React的材质UI步进器

1 个答案: