Material UI stepper with React

Question

I'm trying to figure out how use the Material UI v1 stepper in react, with my own font sizing.

The standard example imposes font sizing at this span class: MuiTypography-body1-99

I've tried adding fontSize properties to the label and MuiTypography classes in the const:

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%',
  }

I can't add a class to the const styles with the name of the class in the UI theme, because the hyphen isn't recognised.

I can't add a fontSize attribute directly to the Typography and content elements on the page, (it gives an error saying fontSize is undefined).

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

How do you set a fontSize with the stepper?

Ariel Salem Ariel Salem · Accepted Answer · 2018-02-26T00:03:43

if I understand your question correctly, you'd like to set the Stepper font-size so that the StepLabel or StepContent have a specific font-size.

This can be done by utilizing the style property that both the StepLabel and StepContent components have.

For example:

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

Hope that answers your question

Material UI stepper with React

1 Answers