Material-ui: StepContent doesn't display when componentized outside of Stepper

Created on 29 Jul 2018  路  2Comments  路  Source: mui-org/material-ui

When you use the Stepper component in vertical orientation, you use the StepContent component as a way to display content for the active step. When I tried to refactor StepContent into its own React component, Material-UI throws a warning in the console saying Warning: Material-UI: <StepContent /> is only designed for use with the vertical stepper. Additionally, the StepContent component itself doesn't display at all.

  • [x] This is a v1.x issue.
  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Refactoring StepContent into its own custom React component shouldn't break the StepContent component being displayed in the Stepper component with vertical orientation.

Current Behavior

Material-UI throws a warning in the console saying Warning: Material-UI: <StepContent /> is only designed for use with the vertical stepper. Additionally, the StepContent component itself doesn't display at all.

Steps to Reproduce

StepContent working (embedded inside Stepper): https://codesandbox.io/s/l573xxp0ll
StepContent broken (inside a custom React.Component): https://codesandbox.io/s/624xo0o5kw

  1. Open the two links
  2. Compare the results. Only basic changes were made to show the problem.

Context

My Stepper component was becoming rather verbose, and I wanted to refactor just the active step content display into its own file to encapsulate my logic better.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.1.0 |
| React | 16.4.0 |
| browser | Chrome |

Stepper support

Most helpful comment

You need to proxy the props down to StepContent: https://codesandbox.io/s/8nxrv89w3l

All 2 comments

You need to proxy the props down to StepContent: https://codesandbox.io/s/8nxrv89w3l

馃憢 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

iamzhouyi picture iamzhouyi  路  3Comments

revskill10 picture revskill10  路  3Comments

ghost picture ghost  路  3Comments

ryanflorence picture ryanflorence  路  3Comments

anthony-dandrea picture anthony-dandrea  路  3Comments