Can't forward component property to styled Mui Button

Question

I've got a styled MUI Button:

const SecondaryButton = styled(Button)<ButtonProps>(({ theme }) => ({
  ...
}));

export default SecondaryButton;

If I use it like this:

<label htmlFor="contained-button-file">
   <input id="contained-button-file" multiple type="file" hidden onChange={this.selectFiles} />
      <SecondaryButton component='span'>
            Dateiauswahl
       </SecondaryButton>
</label>

I get the following typescript error:

Type '{ children: string; component: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "error" | ... 5 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...> & MUIStyledCommonProps<...>'.
Property 'component' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "error" | ... 5 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...> & MUIStyledCommonProps<...>'

If I use the Standard MUI Button instead there is no error. As far as I understand my styled Button should just forward the properties. Hence, it should work.

Any help is appreciated.

Answer 1

As mentioned in the doc, due to some limitations, we have to bypass this by type casting, at least at the moment of this writing

const SecondaryButton = styled(Button)(({ theme }) => ({
  // ...
})) as typeof Button;
    ^^^^^^^^^^^^^^^^

export default SecondaryButton;

References

Complications with the component prop