React typescript: overridable component like mui?

Viewed 39
type Props = {
  LabelComponent?: React.ElementType;
  title: string;
  (props of LabelComponent?)
}

const DefaultLabel:React.FC<{text:string}> = ({text}) => {
  return ...
}

const Paper: React.FC<Props> = ({LabelComponent=DefaultLabel, title, ...props}) => {
  return <div>
    <h1>{title}</h1>
    <LabelComponent {...props} />
  </div>
}

I'd like something similar to mui Box's component.

How could I make the type hint to work?

So when no LabelComponent passed, DefaultLabel is used and when typing <Paper ..., DefaultLabel's props are hinted.

And when other component passed, that component's props are hinted.

0 Answers
Related