rubyreactjsmaterial-uihyperstack

How to use MaterialUI's Mobile-Stepper in HypserStack?


I try to use the mobile-stepper component (https://material-ui.com/demos/steppers/#mobile-stepper-progress) in Hyperstack but I get this error:

Failed prop type: Invalid prop `nextButton` supplied to `MobileStepper`, expected a ReactNode. in MobileStepper

It renders just the progress bar but no buttons.

Tried various ways i.e.:

Mui.MobileStepper( variant: "progress", steps: 6, position: "static",
                   nextButton: lambda { Mui.Button(size: "small") {'next'} },
                   backButton: lambda { Mui.Button(size: "small") {'back'} })

Solution

  • You want to pass a full ReactNode to the nextButton and backButton props. You also need to convert the component to native javascript. You can call to_n on any Hyperstack component to convert it to a native react class.

    Mui.MobileStepper( variant: "progress", steps: 6, position: "static",
                       nextButton: Mui.Button(size: "small") {'next'}.to_n,
                       backButton: Mui.Button(size: "small") {'back'}.to_n)