#Step in separate file

2 messages · Page 1 of 1 (latest)

wet egret
#

It doesn't seem like i can separate the Stepper.Step component into a different file from the actual Stepper. Does anyone know the cause of this? It doesn't receive the onStepClick nor styles in that situation.

This works fine in one file:

<Stepper onStepClick={onClick}>
  <Stepper.Step>...
</Stepper>

However, if the children are from another file it doesnt work:

//customStep.jsx
  const CustomStep = () => {
    return <Stepper.Step />
  }

//stepper.jsx
<Stepper onStepClick={onClick}>
  <CustomStep>...
</Stepper>
daring blade
#

You'll need to propagate all props. E.g.

<Stepper>
    <OwnStep/>
</Stepper>

function OwnStep(props: StepProps): JSX.Element {
    return <Stepper.Step {...props}>
        <div>Hello</div>
    </Stepper.Step>;
}