React, material-ui and stepper: how to display html in each steps

Question

The title says it all. From the examples of Stepper it seems there is only a text that can be shown. Is it possible to display html instead?

If I put html inside <StepContent /> the page looks weird:

I used the following code:

<Stepper activeStep={0}>
    <Step key={1}>
        <StepLabel>FOO</StepLabel>
        <StepContent>
            <div>
                <FormControl component="fieldset" required>
                    <FormLabel component="legend">Gender</FormLabel>
                    <RadioGroup
                        aria-label="gender"
                        name="gender1"
                        value={this.state.value}>
                        <FormControlLabel value="female" control={<Radio/>} label="Female"/>
                        <FormControlLabel value="male" control={<Radio/>} label="Male"/>
                        <FormControlLabel value="other" control={<Radio/>} label="Other"/>
                        <FormControlLabel
                            value="disabled"
                            disabled
                            control={<Radio/>}
                            label="(Disabled option)"
                        />
                    </RadioGroup>
                </FormControl>
            </div>
        </StepContent>
    </Step>
    <Step key={2}>
        <StepLabel> bar </StepLabel>
    </Step>
</Stepper>

Answer 1

Any content you put into StepContent will show up as part of the Step itself, and not shown in it's own content pane below.

If you want to show some larger content, you should keep track of the current step index in your state, and show content depending on that index. This will be a lot more code, but you'll be able to show content correctly. This is how the doc does it, by the way.

Here's a snippet showing how you might accomplish that:

class HorizontalLinearStepper extends React.Component {
  static propTypes = {
    classes: PropTypes.object,
  };

  // Track the active step to know what content to show
  state = {
    activeStep: 0,
  };

  getNumberOfSteps() {
    return 2;
  }

  // Get content based on which step is active
  getStepContent(step) {
    switch (step) {
      case 0:
        return (
          <div>
            <FormControl component="fieldset" required>
              <FormLabel component="legend">Gender</FormLabel>
              <RadioGroup
                aria-label="gender"
                name="gender1"
                value={this.state.value}>
                <FormControlLabel value="female" control={<Radio />} label="Female" />
                <FormControlLabel value="male" control={<Radio />} label="Male" />
                <FormControlLabel value="other" control={<Radio />} label="Other" />
                <FormControlLabel
                  value="disabled"
                  disabled
                  control={<Radio />}
                  label="(Disabled option)"
                />
              </RadioGroup>
            </FormControl>
          </div>
        );
      case 1:
        return (
          <div>
            <Typography>Some more arbitrary content.</Typography>
            <Button>And a big button for good measure</Button>
          </div>
        );
      default:
        return 'Unknown step';
    }
  }

  // Update the active state according to the next button press
  handleNext = () => {
    const { activeStep } = this.state;
    this.setState({
      activeStep: activeStep + 1
    });
  };

  // Similar for back and reset buttons
  handleBack = () => {
    const { activeStep } = this.state;
    this.setState({
      activeStep: activeStep - 1,
    });
  };

  handleReset = () => {
    this.setState({
      activeStep: 0,
    });
  };

  render() {
    const { classes } = this.props;
    const { activeStep } = this.state;

    // Notice that the content below isn't in the Stepper, it's in its own pane underneath
    return (
      <div className={classes.root}>
        <Stepper activeStep={activeStep}>
          <Step key={0}>
            <StepLabel>FOO</StepLabel>
          </Step>
          <Step key={1}>
            <StepLabel> bar </StepLabel>
          </Step>
        </Stepper>
        <div>
          {activeStep === this.getNumberOfSteps() ? (
            <div>
              <Typography className={classes.instructions}>
                All steps completed - you&quot;re finished
              </Typography>
              <Button onClick={this.handleReset} className={classes.button}>
                Reset
              </Button>
            </div>
          ) : (
            <div>
              {
                // Populate the content pane based on the active step
                this.getStepContent(activeStep)
              }
              <div>
                <Button
                  disabled={activeStep === 0}
                  onClick={this.handleBack}
                  className={classes.button}
                >
                  Back
                </Button>
                <Button
                  variant="raised"
                  color="primary"
                  onClick={this.handleNext}
                  className={classes.button}
                >
                    {activeStep === this.getNumberOfSteps() - 1 ? 'Finish' : 'Next'}
                </Button>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}

You can see a full working example here.