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.
Refactoring StepContent into its own custom React component shouldn't break the StepContent component being displayed in the Stepper component with vertical orientation.
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.
StepContent working (embedded inside Stepper): https://codesandbox.io/s/l573xxp0ll
StepContent broken (inside a custom React.Component): https://codesandbox.io/s/624xo0o5kw
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.
| Tech | Version |
|--------------|---------|
| Material-UI | v1.1.0 |
| React | 16.4.0 |
| browser | Chrome |
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.
Most helpful comment
You need to proxy the props down to StepContent: https://codesandbox.io/s/8nxrv89w3l